q要素を使うことで、短い引用文を示すことができます。
q要素の使い方
以下のプログラムと、ブラウザの表示結果を見てください。
<body>
<p>夏目漱石の小説「吾輩は猫である」の冒頭は、<q>吾輩は猫である。名前はまだ無い。</q>で始まります。</p>
</body>
body要素の中に、「文のかたまり（段落）」を示すp要素があります。
p要素の中には、『夏目漱石の小説「吾輩は猫である」の冒頭は、吾輩は猫である。名前はまだ無い。で始まります。』と書かれた文章があります。
そして、「吾輩は猫である。名前はまだ無い。」と書かれたフレーズは、q要素でマークアップされています。
このため、ブラウザの表示結果の通り、「吾輩は猫である。名前はまだ無い。」は、””（ダブルクォーテーション）で挟まれ、引用文であることが示されています。
なお、ブラウザによっては、””ではなく、「」（カギ括弧）で囲まれて表示されることもあります。
英語（英文）ではどうなる？
では、英語（英文）についてもq要素でマークアップしてみましょう。
<body>
<p>夏目漱石の小説「吾輩は猫である」の冒頭は、<q>吾輩は猫である。名前はまだ無い。</q>で始まります。</p>
<p>Soseki Natsume's novel "I am a Cat" begins with the words, <q>I am a cat. I don't have a name yet.</q></p>
</body>
先ほどのプログラムに、更にもう一行、英文を追加しました。
追加した英文では、「I am a cat. I don't have a name yet.」について、q要素でマークアップしてあります。
そして、ブラウザの表示結果の通り、「I am a cat. I don't have a name yet.」は、””で挟まれ、引用文であることが示されています。
q要素はカタカナにマークアップできるか？
さらに、カタカナ（全角、半角）についてもq要素でマークアップを行いました。
<body>
<p>夏目漱石の小説「吾輩は猫である」の冒頭は、<q>吾輩は猫である。名前はまだ無い。</q>で始まります。</p>
<p>Soseki Natsume's novel "I am a Cat" begins with the words, <q>I am a cat. I don't have a name yet.</q></p>
<p>川端康成の小説「雪国」の冒頭は、<q>国境の長いトンネルを抜けると雪国であった。</q>で始まります。</p>
<p>川端康成の小説「雪国」の冒頭は、<q>国境の長いﾄﾝﾈﾙを抜けると雪国であった。</q>で始まります。</p>
</body>
先ほどのプログラムに、カタカナのテキストを含む文章を追加しました。
追加した文章では、「トンネル」、「ﾄﾝﾈﾙ」もフレーズに含まれた状態で、q要素でマークアップしてあります。
そして、ブラウザの表示結果の通り、カタカナ（全角および半角）についても、””で挟まれたフレーズに含まれた状態で、表示できました。
q要素は数字にもマークアップできるか？
数字についてもq要素でマークアップしてみました。
<body>
<p>夏目漱石の小説「吾輩は猫である」の冒頭は、<q>吾輩は猫である。名前はまだ無い。</q>で始まります。</p>
<p>Soseki Natsume's novel "I am a Cat" begins with the words, <q>I am a cat. I don't have a name yet.</q></p>
<p>川端康成の小説「雪国」の冒頭は、<q>国境の長いトンネルを抜けると雪国であった。</q>で始まります。</p>
<p>川端康成の小説「雪国」の冒頭は、<q>国境の長いﾄﾝﾈﾙを抜けると雪国であった。</q>で始まります。</p>
<p><q>僕は三十七歳で、そのときボーイング７４７のシートに座っていた。</q>とは、村上春樹の小説「ノルウェイの森」の冒頭の文章である。</p>
<p><q>僕は三十七歳で、そのときボーイング747のシートに座っていた。</q>とは、村上春樹の小説「ノルウェイの森」の冒頭の文章である。</p>
</body>
先ほどのプログラムに、数字（全角数字、半角数字）のテキストを含む文を追加しました。
追加した文章では、「僕は三十七歳で、そのときボーイング７４７（747）のシートに座っていた。」について、q要素でマークアップしてあります。
そして、ブラウザの表示結果の通り、数字（全角および半角）についても、””で挟まれたフレーズに含まれた状態で、表示することができました。
以上から、q要素は、「全角文字」、「半角数字」、「英文字」、「カタカナ（全角及び半角）」に対して、マークアップできることが確認できました。
cite属性の使い方
q要素にcite属性を使った例を見てみましょう。
以下のプログラムと、ブラウザの表示結果を見てください。
<body>
<p>ニュースによると、<q cite="http://example.com/news/weather/">台風１０号は本日未明に温帯低気圧に変わりました</q>とのことです。</p>
</body>
p要素の中には、『ニュースによると、台風１０号は本日未明に温帯低気圧に変わりましたとのことです。』と書かれた文章があります。
そして、「台風１０号は本日未明に温帯低気圧に変わりました」と書かれたフレーズは、q要素でマークアップされています。
さらに、q要素の中には、cite属性により引用元のURLが記載されています。
ブラウザにおける表示結果では、「台風１０号は本日未明に温帯低気圧に変わりました」が””で挟まれて、引用文であることが示されています。
なお、cite属性により指定された引用元「cite="http://example.com/news/weather/"」は、ブラウザ上における表示として、特別に示されることはありません。
しかし、ウェブ上の文章や画像を定期的に収集するクローラーは、「q要素の中のcite属性の値」として収集することになります。
【カテゴリー】パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ
q要素が属するカテゴリーは、パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツになります。
パルパブル・コンテンツに属する要素は、その要素の中にhidden属性が指定されていない要素を１つ以上含める必要があります。
また、フロー・コンテンツに属する要素は、body要素の中に記述される必要があります。フレージング・コンテンツに属する要素は、テキストをマークアップするために記述される必要があります。
つまり、q要素は、以下のプログラムに示す通り、body要素の中においてテキストをマークアップするために記述され、q要素の中にhidden属性が指定されていない要素を１つ以上含めるように記述する必要があります。
<body>
<p>夏目漱石の小説「こころ」の冒頭は、<q>私はその人を常に先生と呼んでいた。</q>で始まります。</p>
</body>
q要素は、上のプログラムに示す通り、body要素の中でマークアップしたテキストについて、””などを使って引用文であることを表示するために用いる必要があります。
また、プログラムに示す通り、q要素にhidden属性を指定することなく、q要素の内容「私はその人を常に先生と呼んでいた。」がブラウザに表示された状態とする必要があります。
【コンテンツ・モデル】フレージング・コンテンツ
q要素のコンテンツ・モデルは、フレージング・コンテンツです。
フレージング・コンテンツに属する要素は、文章内のテキストをマークアップするための要素です。そして、ブラウザに表示される「テキスト」も、フレージング・コンテンツに属する要素と同じように扱うことができます。
つまり、コンテンツ・モデルをフレージング・コンテンツとする要素（例えばq要素）は、その要素の中にフレージング・コンテンツに属する要素またはテキストを含めるように記述する必要があります。
このため、q要素は、以下のプログラムに示す通り、q要素の中にフレージング・コンテンツに属する要素（例えばstrong要素）を含めるように記述する必要があります。
<body>
<p>島崎藤村の小説「夜明け前」の冒頭は、<q><strong>木曽路はすべて山の中である。</strong></q>で始まります。</p>
</body>
上に示したプログラムでは、body要素の中のp要素において、「木曽路はすべて山の中である。」のフレーズがq要素でマークアップされています。そして、q要素の中において「木曽路はすべて山の中である。」のテキストがstrong要素でマークアップされています。
このため、ブラウザの表示結果の通り、「木曽路はすべて山の中である。」のフレーズについて、引用文であることが示されると共に重要性を付与した状態で表示することができています。
各種ブラウザでの表示結果
q要素について、主要なブラウザにおけるサポート状況は、以下の通りです。
| Google Chrome | Microsoft Edge | Safari | Firefox | Opera | |
| 【q要素】 | ◯ | ◯ | ◯ | ◯ | ◯ |
以上、q要素の使い方について、ご参考になさってください。