HTMLにおける<blockquote>タグの使い方

今回は、HTML5における<blockquote>タグの使い方をご紹介します。

<blockquote>タグは、引用タグの1つです。一般的なブラウザでは、<blockquote>要素は左右にインデントと呼ばれる空白が生成され、字下げがされた状態で表示されます。そのため、<blockquote>タグを利用することで、オリジナルの部分と引用の部分のセクションを明確に分けることができます。

HTML5における<blockquote>タグの使い方

<blockquote>タグは段落単位で引用する場合に使用します。語句単位の場合は、<q>タグを使用します。サンプルコードを見てみましょう。『オリジナルの文章です。』以外の部分が引用の段落になります。

<p>
オリジナルの文章です。オリジナルの文章です。
</p>
<blockquote>
  <p>親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰こしを抜ぬかした事がある。
  </p>
</blockquote>

表示サンプルです。このように、引用の部分はインデントがついて字下げされた状態で表示されます。

スクリーンショット 2016-05-16 15.42.43

また、引用元などをマークアップする<cite>タグを併用することもよくあるので、合わせて覚えておくと便利です。

<p>
オリジナルの文章です。オリジナルの文章です。
</p>
<blockquote>
  <p>親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰こしを抜ぬかした事がある。
  </p>
<cite><a href=”sample.html”>引用元名前</a></cite>
</blockquote>

表示サンプルです。

スクリーンショット 2016-05-16 16.00.09


イベント