【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)
戻り値なし
戻り値はありません
サンプルコード
blockquote要素で引用文を表現する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>blockquote要素のサンプル</title> 7</head> 8<body> 9 <h1>blockquote要素の例</h1> 10 11 <p>以下は、ある著作物からの引用文です。</p> 12 13 <!-- blockquote要素は、他のソースから引用されたブロックレベルのコンテンツを示します。 --> 14 <!-- ブラウザは通常、blockquoteの内容をインデントして表示します。 --> 15 <blockquote> 16 <p>真の知識とは、自分が何も知らないということを知ることである。</p> 17 <!-- 引用元（著者名や作品名など）は、blockquote要素の内部にfooter要素やcite要素を使って記述するのが一般的です。 --> 18 <footer> 19 — <cite>ソクラテス</cite> 20 </footer> 21 </blockquote> 22 23 <p>ウェブページで文章の引用を示す際にこの要素を使用します。</p> 24</body> 25</html>
HTMLの<blockquote>要素は、ウェブページ上で他の情報源から引用されたブロックレベルのテキストを示すために使用されます。この要素は、文章全体や段落など、まとまった内容を引用する際に特に適しています。
HTMLの要素には、特定の振る舞いを指定するための「引数」や、何らかの処理結果を返す「戻り値」を持つものもありますが、<blockquote>要素にはこれらがありません。つまり、特別な設定なしに、純粋に引用というコンテンツの意味を伝えるために使われる要素です。
提供されたサンプルコードでは、「真の知識とは、自分が何も知らないということを知ることである。」というソクラテスの言葉が<blockquote>タグで囲まれています。このように記述することで、ブラウザは通常、引用された内容を左右にインデント（字下げ）して表示し、通常のテキストと区別しやすくします。
引用元（誰の言葉か、どの作品からの引用かなど）を示す際には、<blockquote>要素の内部に<footer>要素や、引用元のタイトルを示す<cite>要素を組み合わせて記述することが一般的です。これにより、引用文とその出典が明確になります。
このように、<blockquote>要素は、ウェブサイトで外部の文章や発言を正確に引用し、読者に対してそれが引用であることを明確に伝えるための重要なHTML要素です。
<blockquote>要素は、単に文章をインデント表示するためではなく、他の情報源からの引用であることを明確に示すために使用します。見た目のインデントはCSSで調整し、<blockquote>をデザイン目的で使わないように注意しましょう。
この要素はブロックレベルの引用に利用し、文中の短いインラインの引用には<q>要素が適切です。引用元（著者名や作品名など）は、サンプルコードのように<blockquote>要素の内部に<footer>や<cite>要素を使って記述すると、その情報がより構造的に伝わります。また、<blockquote>には引用元のURLを示すcite属性を指定することもできますが、これはユーザーには表示されません。常にその意味合いに沿って正しく利用することが重要です。
HTML blockquoteで引用を表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>引用の例</title> 7</head> 8<body> 9 <h1>有名な言葉の引用</h1> 10 <p> 11 以下は、スティーブ・ジョブズ氏がスタンフォード大学の卒業式で行ったスピーチからの引用です。 12 </p> 13 14 <!-- blockquote要素は、他のソースからの長文引用を示すために使用されます。 --> 15 <!-- cite属性には引用元のURLを指定しますが、ブラウザには直接表示されません。 --> 16 <blockquote cite="https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%96%E3%83%B3%E3%83%BB%E3%82%B8%E3%83%A7%E3%83%96%E3%82%BA"> 17 <p>Stay hungry, stay foolish.</p> 18 <!-- <footer>要素と<cite>要素を使って、引用元をより具体的に表示することが推奨されます。 --> 19 <footer> 20 — スティーブ・ジョブズ, 21 <cite>スタンフォード大学卒業式スピーチ (2005年)</cite> 22 </footer> 23 </blockquote> 24 25 <p> 26 この言葉は、常に学び続け、新しいことに挑戦することの重要性を示しています。 27 </p> 28</body> 29</html>
HTMLの<blockquote>要素は、他のウェブサイトや書籍、人物の発言など、外部のソースから引用した長文の内容を示すために使用されます。この要素を用いることで、そのコンテンツがオリジナルのものではなく、引用されたものであることをブラウザや検索エンジンに正確に伝えることができます。
サンプルコードでは、スティーブ・ジョブズ氏の言葉を<blockquote>タグで囲んで引用しています。このように記述すると、多くのブラウザでは引用された内容が本文よりも少し字下げ（インデント）されて表示され、視覚的に区別されるのが一般的です。
<blockquote>要素にはcite属性を付与することができます。この属性には、引用元のURLを記述しますが、ブラウザの画面上には直接表示されません。これは主に機械が引用元の情報を理解するためのものです。引用元を読者に向けて表示したい場合は、サンプルコードのように<footer>要素の中に引用元の情報を含め、特に作品名などを<cite>要素で囲むことが推奨されています。
この<blockquote>要素はHTMLの構造を定義する「要素」であり、プログラミング言語の関数のように特定の「引数」を受け取ったり、「戻り値」を返したりする機能はありません。引数の代わりに、cite属性などの「属性」を通じて付加的な情報を提供します。正確なセマンティクス（意味）に基づいたHTMLのマークアップは、ウェブページの情報の構造を明確にし、アクセシビリティや検索エンジン最適化（SEO）にも役立ちます。
<blockquote>要素は、他のソースからの長文引用を示すために使用されます。見た目をインデントさせたいだけであれば、CSSを使用し、意味論的に引用ではない場所には使わないよう注意が必要です。cite属性には引用元のURLを指定しますが、これはブラウザには直接表示されません。そのため、引用元をユーザーに明示するには、サンプルコードのように<footer>や<cite>要素を組み合わせて記述することが重要です。短い引用には<q>要素を使い分け、<blockquote>は段落を含むような長い引用に限定して使用してください。これは検索エンジンやスクリーンリーダーにとっても重要な情報となり、コンテンツの信頼性とアクセシビリティを高めます。