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

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

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

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

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

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

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

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

表示サンプルです。

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集

購読

平日・毎朝更新中