blockquoteとは
- blockquote とは次の語句からなるHTMLの要素です。
- block
- 読み: ブロック
意味: かたまり、まとまり - quote
- 読み: クォート
意味: 引用文
blockquote要素の概要
この要素は、比較的長い文章を引用したい場合に使用します。 他の書籍やサイトなどの著作物から、いくつかの段落を含むような文章を引用する場合には、この要素を使用してください。
この要素にはcite属性があり、引用元の情報を示すことができますが、この情報はブラウザ上に表示される訳ではありません。 あくまでも検索エンジンにその引用元の情報を伝えることになります。このためblockquote要素を使用する場合にはcite要素も 合わせて使用し、引用元をブラウザに表示させることが望ましいと考えます。
一般的なブラウザでは文字下げ(インデント)で表示されます。
この要素には、開始タグと終了タグが必要です。
<blockquote> </blockquote>
サンプルコードと実行結果
この要素は段落を含むような長めの文章の引用を表します。 短い文章の引用には q要素 を使用することができます。
また、サンプルで使用しているcite要素は著者名や作品のタイトル、WebページやSNS等のURL等を表す要素です。 cite には要素と属性の二種類がありますので注意が必要です。 なお、この cite要素 と cite属性 のマークアップの意味は同じです。
サンプルコード: CSS
<style>
blockquote{
background-color: floralwhite;
padding: 20PX;
}
</style>
サンプルコード: HTML
<body>
HTML要素のアクセシビリティの考慮事項について次のように説明されています。
<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/html">
<p>
引用文の段落
</p>
<p>
引用文の段落
</p>
<cite>MDN web docs</cite>より引用
</blockquote>
</body>
HTML要素のアクセシビリティの考慮事項について次のように説明されています。
<html> 要素に対して lang 属性に有効な IETF の識別用言語タグを設定することで、読み上げ技術が正しい言語をアナウンスする助けになります。 識別用言語タグはページのコンテンツの大部分で使用されている言語を記述するべきです。 これがないと、読み上げソフトはふつう、既定でオペレーティングシステムの設定言語を使用しますので、間違って発音する可能性があります。
html 要素に妥当な lang を設定することは、ページの <head> に含まれる <title> などの重要なメタデータについても、正しくアナウンスすることができます。
MDN web docs より引用