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

<q>タグは、引用していることを表す際に使用するタグです。今回は、HTML5における<q>タグの使い方についてご紹介します。

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

<q>タグは、他の場所から引用しているということを表す際に使用するタグです。

引用したテキストを以下のタグで囲んで使用します。

サンプルコードです。以下のように、外部から引用したテキストを<q>〜<q>で囲みました。

下の画像は表示サンプルです。

スクリーンショット 2016-06-29 17.17.13

HTML内では、吾輩は猫である。名前はまだ無い。というテキストしか入力をしていませんが、<q>〜</q>で囲んで、引用したことが定義されたテキストは、「」や""などで囲まれて表示されます。「」や””は、自動で表示されるので、自分で入力する必要はありません。

またcite属性を使って、引用元を指定することもできます。サンプルコードは以下を参考にしてください。表示は変わりません。

引用したテキストを分かりやすく定義しておくのに、非常に便利な<q>要素ですが、引用したテキストに関しては、必ず<q>要素を使用しなくてはいけない決まりはないようです。

そのため、<q>要素を使わない場合は、自分で直接「」などをテキストで書き込んでも問題ではありません。しかし、「」などで囲みたいからといって、引用したテキストではないテキストに対して、<q>要素を使用するのは避けるようにしましょう。


Welcome to UX MILK

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

このサイトについて

購読

平日・週2回更新