blockquote要素はブロックレベル要素？
Webページを作成する際、文章を引用したい場合があります。HTMLでは、短い引用には<q>要素、長い引用には<blockquote>要素を使用します。この記事では、<blockquote>要素がブロックレベル要素かどうか、その特徴、使い方、注意点などを詳しく解説します。
blockquote要素とは
<blockquote>要素は、他のソースからの引用を表すブロックレベル要素です。書籍、記事、スピーチなど、長い文章を引用する際に使用します。一般的なWebブラウザでは、<blockquote>要素で囲まれたテキストは、周囲にインデントが設定され、独立したブロックとして表示されます。
blockquote要素はブロックレベル要素？
はい、<blockquote>要素はブロックレベル要素です。つまり、<blockquote>要素は、新しい行から始まり、その後に続く要素も新しい行から始まります。また、<blockquote>要素には、幅、高さ、マージン、パディングなどのブロックレベル要素に適用可能なスタイルを設定できます。
blockquote要素の使い方
<blockquote>要素は、開始タグ<blockquote>と終了タグ<blockquote>で囲みます。引用符は自動的に追加されませんので、必要に応じて文中に含めてください。例えば、次のように使用します。
<blockquote>
<p>これは引用文の例です。</p>
</blockquote>
上記は、次のようにブラウザに表示されます。
これは引用文の例です。
cite属性と引用元
<blockquote>要素には、引用元を示すcite属性を指定できます。cite属性には、引用元となるWebページのURLを指定します。ただし、cite属性は引用元を示すだけであり、ブラウザには表示されません。引用元を表示する場合は、<footer>要素などを使用して、別途記述する必要があります。
<blockquote cite="https://www.example.com/quote">
<p>これは引用文の例です。</p>
<footer>— 引用元: <cite>引用元名</cite></footer>
</blockquote>
blockquote要素とq要素の違い
<blockquote>要素と<q>要素は、どちらも引用を表す要素ですが、使用する場面が異なります。<q>要素は、文中に埋め込まれた短い引用に適しており、<blockquote>要素は、段落全体など、長い引用に適しています。<q>要素はインライン要素であるのに対し、<blockquote>要素はブロックレベル要素であるという違いもあります。
| 要素 | 説明 | 表示例 |
|---|---|---|
<blockquote> |
長い引用（段落全体など） | ブロックとして表示され、インデントが設定される |
<q> |
短い引用（文中に埋め込まれたもの） | インラインで表示され、ブラウザによっては引用符が自動的に追加される |
注意点
<blockquote>要素は、あくまでも引用を表すための要素です。単にテキストをインデント表示したい場合は、CSSのmarginプロパティやpaddingプロパティを使用する方が適切です。
参考文献
- <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote">HTML要素リファレンス - <blockquote></a>
よくある質問
Q1: <blockquote>要素の中に他のHTML要素を含めることはできますか？
A1: はい、<blockquote>要素の中には、段落(<p>)、見出し(<h1>～<h6>)、リスト(<ul>、<ol>)など、他のHTML要素を含めることができます。
Q2: <blockquote>要素のスタイルを変更することはできますか？
A2: はい、CSSを使用して、<blockquote>要素のスタイルを変更することができます。例えば、インデントの幅や色、背景色などを変更することができます。
Q3: <blockquote>要素の代わりに<div>要素を使用しても良いですか？
A3: テキストをインデント表示するためだけに<blockquote>要素を使用することは適切ではありません。<blockquote>要素は、あくまでも引用を表すための要素です。単にテキストをインデント表示したい場合は、CSSのmarginプロパティやpaddingプロパティを使用する方が適切です。
その他の参考記事:HTML DOM blockquote オブジェクト