HTMLのblockquote・q要素とは？引用の書き方を解説

💡 この記事でわかること

blockquote要素・q要素とは、
👉 他のサイトや書籍からの引用であることをHTML上で示すためのタグです。

単に文章を太字にしたり枠で囲ったりするだけでは「見た目が引用っぽい」だけで、そのテキストが本当に引用であるという意味は伝わりません。blockquote・q要素を使うことで、検索エンジンやスクリーンリーダーにも「これは引用文である」という情報が正しく伝わります。

段落単位・複数行にわたる長めの引用には、blockquote要素を使います。

<blockquote cite="https://example.com/article">
  <p>プログラミングは、書いて動かして初めて身につく。</p>
</blockquote>

💡 cite属性には引用元のURLを指定します。画面には表示されませんが、引用元を明示する情報として付けておくのが望ましいとされています。

文章の一部に短く引用を挟みたい場合は、インライン(行内)で使えるq要素を使います。

<p>彼は<q cite="https://example.com/article">継続は力なり</q>と語った。</p>

👉 q要素は、ブラウザが自動的に前後に引用符(“”のようなクオーテーションマーク)を表示してくれます。自分で「」や""を文字として書き加える必要はありません。

blockquote・qのcite属性と、cite要素は名前が似ていますが役割が異なります。cite要素は、書籍名や記事タイトルなど「作品名」を表すためのタグで、画面上にも文字として表示されます。

<blockquote cite="https://example.com/article">
  <p>プログラミングは、書いて動かして初めて身につく。</p>
</blockquote>
<p>— <cite>プログラミング入門</cite>より</p>

💡 cite属性(引用元のURL、非表示)とcite要素(作品名、表示される)は別物として区別して覚えておきましょう。

ブラウザ標準のblockquoteは左右に余白が付き字下げされたように見えますが、これは「引用だから」ではなく単なるデフォルトスタイルです。引用ではない文章を字下げしたいだけの目的でblockquoteを使うのは適切ではなく、その場合はCSSのmarginやpaddingで調整すべきです。

HTML上で正しくマークアップすることと、著作権法上適切な引用であることは別の話です。引用部分がひと目で分かるようにする、引用元を明示する、自分の文章が主で引用が従という関係を保つ、といった基本的なルールを踏まえたうえで使いましょう。

blockquote要素・q要素を使うと、他のサイトや書籍からの引用であることをHTML上で正しく示せます。

手元にある引用したい文章を1つ、blockquoteまたはqタグでマークアップしてみましょう。