Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】blockquote要素の使い方

blockquote要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

blockquoteオブジェクトは、他のソースからの長い引用コンテンツを表すオブジェクトです。ウェブページ上で、主に段落全体や複数の段落にわたる引用を表示する際に利用されます。この要素を用いることで、コンテンツのその部分が外部からの引用であることをブラウザや検索エンジン、スクリーンリーダーなどの支援技術に対して明確に伝えることができます。

視覚的には、多くのブラウザで引用内容が左右にインデントされて表示されるのが一般的ですが、これは要素のデフォルトスタイルであり、その表示方法はCSSによって自由に制御可能です。重要なのは、blockquote が持つ「引用」という意味です。単にテキストをインデントさせたいだけであれば、CSSでスタイルを適用するべきであり、blockquote を使うべきではありません。

引用元を示すための属性として、cite 属性があります。この属性には引用元コンテンツのURLを指定することで、機械がその引用の出典を理解するのに役立ちます。ただし、このURLはユーザーには直接表示されません。ユーザーに対して引用元情報(著者名、書籍名など)を表示したい場合は、blockquote の内部に footer 要素や figcaption 要素、または通常の段落要素(<p>)などを用いて記述することが推奨されます。

短いインラインの引用や、数語程度の引用には q 要素を使用するのが適切です。blockquote は、コンテンツのセマンティクス(意味)を正確に伝えるために非常に重要な要素であり、適切なマークアップはウェブコンテンツの品質とアクセシビリティ向上に貢献します。

構文(syntax)

1<blockquote>
2  <p>ここに引用されるコンテンツが入ります。</p>
3</blockquote>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ