この記事の要点

<blockquote> は長い引用を表すブロックレベル要素 — 段落単位の引用に使う cite 属性に引用元の URL を URL 形式で指定可能（表示はされない、機械可読のメタ情報） 引用元の表記は <cite> 要素や <figcaption> で本文として補足するのが定番 短い文中引用には <q>（インライン引用）を使い分ける デフォルトスタイルは左右にインデント — CSS で罫線・引用符・背景色を加えるとデザイン的に映える 関連: テキスト・フォント系要素

blockquote 要素とは

<blockquote> 要素は HTML で長い引用文を示すために使うブロックレベル要素です。書籍・記事・スピーチ・他サイトからの段落単位の引用を、セマンティックに表現できます。

見た目はブラウザ既定で左右にインデントされ、引用部分が視覚的にわかります。スタイルは CSS で自由に上書き可能です。

基本構文

<blockquote cite="https://example.com/article">
  <p>引用文の本体をここに入れる。
  改行を含む長い段落でも問題ない。</p>
</blockquote>

blockquote の中身は段落単位の引用なので、<p> で段落を区切るのがベストプラクティスです。テキストだけ直書きでも動きますが、段落構造を明示した方が読みやすくなります。

属性

属性	意味	表示
cite	引用元の URL（機械可読）	画面表示されない

cite 属性は表示されないメタ情報。検索エンジンやブラウザの拡張機能が読み取れる引用元の URL を入れます。読者に見せたい場合は、本文に <cite> 要素や <footer> を併記します。

引用元を見える形で補足する

<figure>
  <blockquote cite="https://example.com/speech">
    <p>政府の事業は、人民の、人民による、人民のための、
    政治を地上から決して絶滅させないことである。</p>
  </blockquote>
  <figcaption>
    — Abraham Lincoln,
    <cite><a href="https://example.com/speech">Gettysburg Address</a></cite>
  </figcaption>
</figure>

<figure> + <figcaption> + <cite> の組み合わせが、HTML5 で推奨される引用パターンです。引用元の作品名は <cite> 要素で囲みます（人名は cite ではなくテキストで）。

blockquote と q の使い分け

要素	用途	表示
<blockquote>	段落単位の長い引用	ブロックレベル・インデント
<q>	文中の短い引用	インライン・自動で引用符
<cite>	作品タイトルの引用	イタリック（既定）

CSS でスタイリングする例

blockquote {
    margin: 1em 2em;
    padding: 1em 1.5em;
    border-left: 4px solid #2980b9;
    background: #f5f9fc;
    color: #333;
    font-style: italic;
    position: relative;
}

blockquote::before {
    content: '\201C'; /* 左ダブルクォート */
    font-size: 3em;
    color: #2980b9;
    position: absolute;
    left: 8px;
    top: -8px;
}

blockquote p {
    margin: 0.5em 0;
}

blockquote footer {
    text-align: right;
    font-style: normal;
    color: #666;
}

SEO とセマンティクスの観点

• Google は blockquote を「他からの引用」として認識 — 重複コンテンツ判定で引用と原稿の区別に役立つ
• cite 属性に出典 URL を入れておくと、検索エンジンが引用元との関係を把握しやすい
• 引用は主従関係を満たし、適切に出典を明記して、初めて著作権法上の「引用」として成立する

引用と著作権

HTML 上で blockquote を使うこと自体は著作権侵害になりませんが、適切な引用として法律上認められるには次の要件を満たす必要があります（日本の著作権法第 32 条）。

• 公表された著作物から引用していること
• 引用が必要な合理的な理由があること（論評・批評・解説など）
• 本文（自分の文章）が主・引用部分が従であること
• 原文を改変せずそのまま掲載していること
• 出典を明示していること（著者名・タイトル・URL など）

blockquote の cite 属性と figcaption の cite 要素は、まさにこの「出典明示」をマシン可読・ヒューマン可読の両形態で行うための仕組みです。

ブログ記事での典型レイアウト

<article>
  <p>このトピックについて、ある研究者は次のように述べている:</p>

  <blockquote cite="https://example.com/paper">
    <p>原文の引用。改変せずそのまま、出典を明示して短くまとめる。</p>
  </blockquote>

  <p>出典: <cite><a href="https://example.com/paper">論文タイトル</a></cite>（2024）</p>

  <p>引用への筆者の解釈・コメントを続ける...</p>
</article>

ブラウザ既定スタイル

主要ブラウザの blockquote には、概ね次のようなデフォルト CSS が適用されています。

/* Chrome / Firefox / Safari の概ねの既定 */
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

左右に約 40px のインデントが入るのが標準動作。レイアウトデザイン上、このマージンを margin: 0 でリセットしてから独自のスタイルを当てるのが一般的です。

FAQ

Q: cite 属性は SEO に効く？
A: 直接の順位ブーストは公表されていないが、セマンティックに正しいマークアップはユーザー指標で間接的に有利。

Q: 短い引用も blockquote にしていい？
A: 文中の数語なら <q>、段落単位なら blockquote と使い分ける。

Q: blockquote の中に複数段落を入れていい？
A: 良い。むしろ複数 p で構成するのが本来の使い方。

Q: マークダウンの ">" から HTML に変換されると blockquote になる？
A: なる。GitHub Flavored Markdown を含む主要パーサは、行頭 > を blockquote 要素に変換する仕様。

Q: ネストして引用の中にさらに引用を入れたい
A: blockquote の中に blockquote を入れるだけで OK。インデントが二重にかかる。

関連: テキスト・フォント系要素 / nav 要素