HTML

HyperText Markup Language blockquote element.

blockquote 要素

　blockquote(ブロッククォート) 要素は、他の情報源から引用や転載されたセクションであることを表す際に使用します。引用文であることを示しているため、文章の長さには左右されません。もし、引用元の参照 URL がある場合には、引用元への配慮や礼儀、盗用ではないことを明示するためにも cite 属性を使って、その URL を指定してください。単語ではなく、文章となっているものに対して使うことがほとんどです。フレーズ単位で引用したい場合には、この要素ではなく q 要素を使用します。

<blockquote>
  引用部分を表します。
</blockquote>

　引用、または転載した文をこれらの要素を使わずに掲載した場合、法律的にも問題がありますし、何よりも検索エンジンに「悪質なコピーサイト」であると判断され SEO 的に大きな問題となります。

引用元の URL を示す

　blockquote 要素に cite 属性を追加すると、画面に表示されるわけではありませんが、引用元の URL を示すことができます。

<blockquote cite="https://www.yugien.xyz/">
  引用部分を表します。
</blockquote>

※引用元の作品タイトルや著者名を示したい場合、または引用元のURLを見える形で示したい場合は、この属性ではなく cite 要素を使用したり、blockquote 要素内に配置した footer 要素の中に入れておく必要があるようです。

要素内の見出しのランクについて

　blockquote 要素はセクショニング・ルートとなります。そのため、この要素内では「独自の見出しのランク付け」を行うことができます。

blockquote 要素の概要

Category 「カテゴリー」
Flow content 「フロー・コンテンツ」
Sectioning root 「セクショニング・ルート：区分化ルート」
Palpable content 「パルパブル・コンテンツ：知覚可能コンテンツ」
Content model 「コンテンツ･モデル」
Flow content 「フロー・コンテンツ」
利用可能な場所
フロー・コンテンツが期待される場所
タグの省略
不可。開始と終了タグの両方が必要。
要素固有のコンテンツ属性
cite
引用元を参照する URL、または引用元の情報に関するメッセージを示します。この属性は、引用文の背景や出典についての説明を指し示そうとするものです。
グローバル属性
標準的なスタイル
blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}
※一部のブラウザでは、右マージンが設定されていない場合があるようです。
スタイルシートが普及する以前はインデントを実現する手段がなかったため、blockquote要素はインデントの代役として使用された時期もあったようですが、本来の意味は「引用」です。スタイルシートを問題なく利用可能になっている現在は、インデントを実現する場合はスタイルシートの margin-left や margin などを用いてください。
DOM インターフェイス
HTMLQuoteElement

使用例

blockquote 要素のマークアップ例

<p>フレーズ単位で引用したい場合には、この要素ではなく q要素を使用します。</p>
<blockquote cite="https://www.yugien.xyz/web/html/q.html">
  <p class="h3normal">q 要素</p>
  <p>q要素は、引用文を表します。この要素は、あくまでもフレーズにしか使ってはいけません。複数のフレーズを含むようなブロックとして使うべきではありません。</p>

blockquote要素のマークアップ例のサンプル

フレーズ単位で引用したい場合には、この要素ではなく q要素を使用します。

q 要素

q要素は、引用文を表します。この要素は、あくまでもフレーズにしか使ってはいけません。複数のフレーズを含むようなブロックとして使うべきではありません。

　このサンプルでは、blockquote 要素の中で h3 要素を使っています。通常、h3 要素のような見出し要素を使うと、アウトライン・アルゴリズムにおいては、このドキュメントに新たなセクションが作られたと解釈されます。しかし、blockquote 要素はセクショニング・ルート要素です。そのため、このサンプルでは、blockquote 要素の中の見出しは、このドキュメントの見出しとしては解釈されない点に注意してください。

引用元を伴ったレイアウト

フレーズ単位で引用したい場合には、この要素ではなく q要素を使用します。

q 要素

q要素は、引用文を表します。この要素は、あくまでもフレーズにしか使ってはいけません。複数のフレーズを含むようなブロックとして使うべきではありません。

出典：Waste Of Time

　このレイアウトを実現するために、次のようにマークアップするのは適切ではありません。

不適切なマークアップ

<p>フレーズ単位で引用したい場合には、この要素ではなく q要素を使用します。</p>

<blockquote cite="https://www.yugien.xyz/web/html/q.html">
  <h3>q 要素</h3>
  <p>q要素は、引用文を表します。この要素は...</p>
  <p>出典：<cite>Waste Of Time</cite></p>
</blockquote>

　なぜなら、「出典：Waste Of Time」の部分は、引用文ではないからです。引用文でない以上、blockquote 要素の外にマークアップするべきです。

適切なマークアップ

<p>フレーズ単位で引用したい場合には、この要素ではなく q要素を使用します。</p>

<div>
  <blockquote cite="https://www.yugien.xyz/web/html/q.html">
   <h3>q 要素</h3>
   <p>q要素は、引用文を表します。この要素は...</p>
  </blockquote>
  <p>出典：<cite>Waste Of Time</cite></p>
</div>

　ちなみに、ここのレイアウト例では CSS を使ってレイアウトを編集しています。

ここで使った CSS

<style>
.quote {
  margin: 1em 20px;
  border: 1px solid black;
  padding: 10px;
}

.bqs {
  margin: 1em 10px;
}

@media (prefers-color-scheme: dark) {
  .quote {
   border-color: #dddddd;
  }
}

.taright {
  text-align: right;
}
</style>
：
：
<p>フレーズ単位で引用したい場合には、この要素ではなく q要素を使用します。</p>

<div class="quote">
  <blockquote cite="https://www.yugien.xyz/web/html/q.html">
   <h3>q 要素</h3>
   <p>q要素は、引用文を表します。この要素は...</p>
  </blockquote>
  <p class="taright">出典：<cite>Waste Of Time</cite></p>
</div>

　CSS を使わずに表示すると、ちょっとわかりづらい表示になってしまいますので、ページデザインや好みに合うスタイルを使って表現する必要があるようです。

CSS を使わずに表示した場合

フレーズ単位で引用したい場合には、この要素ではなく q要素を使用します。

q 要素

q要素は、引用文を表します。この要素は、あくまでもフレーズにしか使ってはいけません。複数のフレーズを含むようなブロックとして使うべきではありません。

出典：Waste Of Time

+CSS Sample

+CSS Sample 1

フレーズ単位で引用したい場合には、この要素ではなく q要素を使用します。

q 要素

q要素は、引用文を表します。この要素は、あくまでもフレーズにしか使ってはいけません。複数のフレーズを含むようなブロックとして使うべきではありません。

出典：Waste Of Time