他のサイトや書籍から文章を引用するとき、ただ見た目を変えるだけでなく、HTML として「ここは引用です」と正しくマークアップすることが大切です。HTML には引用を表す blockquote・q・cite という要素が用意されています。この記事では、それぞれの役割と使い分け、出典の示し方、よくある誤用までをわかりやすく解説します。
目次
引用を表す3つの要素
まずは3つの要素の役割を整理しておきます。それぞれ用途がはっきり分かれています。
| 要素 | 役割 |
|---|---|
blockquote | 段落などの長い引用（ブロックレベル） |
q | 文中に差し込む短い引用（インライン） |
cite | 作品名・出典のタイトルを表す |
ざっくり言うと、まとまった文章の引用には blockquote、文章の途中に入れる一言の引用には q、そして引用元の作品名を示すのに cite を使います。これらを正しく使うと、検索エンジンや支援技術に「ここは引用部分」という意味が正しく伝わります。
blockquote で長い引用をマークアップする
blockquote は、段落単位のまとまった引用に使うブロックレベルの要素です。多くのブラウザでは初期スタイルとして左右に少しインデントが付きます。中には引用された文章をそのまま入れます。
<blockquote>
<p>ウェブはその設計上、すべての人のためのものです。</p>
</blockquote>cite 属性で引用元のURLを示す
blockquote には cite という属性があり、引用元のページの URL を指定できます。これは画面には表示されませんが、引用の出典を機械的に示すための情報になります。後述の cite要素とは別物なので混同しないようにしましょう。
<blockquote cite="https://example.com/article">
<p>引用された本文がここに入ります。</p>
</blockquote>q で短い引用を文中に入れる
q は、文章の途中に差し込む短い引用に使うインライン要素です。q の特徴は、ブラウザが引用符を自動で付けてくれることです。自分で「」や "" を書く必要はありません。
<p>彼女は <q>明日また来ます</q> と言った。</p>
<!-- 表示例: 彼女は “明日また来ます” と言った。 -->引用符が自動で付くため、自分でも引用符を書くと二重になってしまいます。q を使うときは引用符を手書きしないように注意してください。q にも cite 属性で出典 URL を指定できます。
cite 要素で出典のタイトルを示す
cite 要素は、引用元の作品名・タイトル（本、記事、映画、Webページなど）を表します。多くのブラウザでは斜体で表示されます。引用文と組み合わせて、どこからの引用かを画面上に示すのに使います。
<blockquote>
<p>シンプルさは究極の洗練である。</p>
</blockquote>
<p>— <cite>レオナルド・ダ・ヴィンチ</cite></p>HTML の仕様では、cite 要素は「作品のタイトル」を指すものとされています。人名そのものを囲む使い方は本来の用途とは少しずれますが、出典表記の慣習として人名や著者名に使われることもよくあります。
出典をきれいに示すパターン
出典を画面に表示したいときは、blockquote の外に出典を書くのが無難です。仕様上、blockquote の中に出典情報（cite 要素など）を入れることは推奨されていないため、引用と出典を分けて書きます。figure と figcaption を使うと、引用とその説明をひとまとめにできます。
<figure>
<blockquote cite="https://example.com/book">
<p>できるだけシンプルに、しかし単純化しすぎないように。</p>
</blockquote>
<figcaption>
アインシュタイン <cite>名言集</cite>
</figcaption>
</figure>使うときに迷いやすいところ
見た目のためだけに blockquote を使わない
blockquote は初期スタイルで左右に余白が付くため、「少し字下げしたい」という見た目目的で使われることがありますが、これは誤用です。引用ではない文章に使うと意味が正しく伝わりません。インデントなどの見た目は CSS で調整し、blockquote は実際の引用にだけ使いましょう。
cite 属性と cite 要素を混同しない
名前が同じでまぎらわしいですが、cite 属性（blockquote や q に付ける URL）と cite 要素（作品名を囲むタグ）はまったくの別物です。属性は画面に表示されず機械向けの情報、要素は画面に表示される作品名、と覚えておくと混乱しません。
まとめ
引用は専用の要素を使うことで、見た目だけでなく意味も正しく伝えられます。
blockquoteは段落単位の長い引用に使うブロック要素qは文中の短い引用に使い、引用符は自動で付く（手書きしない）cite要素は引用元の作品名・タイトルを表すcite属性（URL）とcite要素（作品名）は別物- 出典は
blockquoteの外に書き、figure+figcaptionでまとめると整理しやすい
引用部分を正しくマークアップしておくと、文章の信頼性が高まり、アクセシビリティや SEO の面でもプラスになります。引用を載せるときは、見た目だけでなく要素の意味も意識してみてください。