HTML <q>

<Q> は他の文献からの引用を表わすHTMLタグです。この記事では使い方をサンプルを交えてご紹介します。

開始タグと終了タグに囲まれた文字列が引用 (quotation) であることを表します。Q 要素タイプはインライン要素（前後に改行が入らない）です。引用文をブロック要素（前後に改行が入る）として扱うには、<blockquote> を使用します。

書式

<q>
  <!-- phrasing content  -->
</q>

開始タグと終了タグは省略できません。開始タグと終了タグの間にはインライン要素が任意回数表れます。

内容

q 要素の開始タグと終了タグの間にフレージング・コンテンツを含めることができる。

属性

q要素には次の属性を指定することができる。

cite
引用元のURLを指定する。 
<q cite="https://html.spec.whatwg.org/">
  The q element represents some phrasing content quoted from another source.
</q>
class
CSSのクラスを指定する。空白で区切って複数のクラスを指定することもできる。
data-*
カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScriptから独自の属性を読み取るための仕組みである。
id
HTML文書内において一意な識別子を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って複数のプロパティを指定することもできる。

引用符

q要素で使われる引用符は、CSSの quotes プロパティで指定することができる。

<p style="quotes: '\201C' '\201D' '\2018' '\2019'">
  <q>quotes <q>quotes in quotes</q> quotes</q>
</p>

quotes quotes in quotes quotes

title
ソースに関する詳細情報など、ツールチップに適した要素のアドバイザリ情報を指定する。

サンプル

<p>令和の元号は万葉集の<q>初春令月気淑風和</q>が出典とされています。</p>

令和の元号は万葉集の初春令月気淑風和が出典とされています。

英語の引用符

言語によって引用符に使われる記号は異なる。q要素を使うと、言語に応じて適切な引用符で表示される。

<p lang="en">
  <q cite="https://html.spec.whatwg.org/">
    The q element represents some phrasing content quoted from another source.
  </q>
</p>

The q element represents some phrasing content quoted from another source.

JavaScript

JavaScriptからはHTMLQuoteElementインタフェースを通じてq要素にアクセスできる。

HTMLQuoteElementインタフェースのプロパティ
プロパティ 型 説明
className DOMString q要素のclass属性
clientHeight Number q要素の内部の高さ（読取専用）
clientWidth Number q要素の内部の幅（読取専用）
cite DOMString q要素のcite属性
dataset DOMStringMap q要素のカスタムデータ属性
dir DOMString q要素のdir属性
id DOMString q要素のid属性
innerHTML DOMString q要素内のマークアップ
innerText DOMString ノードに描画されるテキスト
lang DOMString q要素のlang属性
style CSSStyleDeclaration q要素のstyle属性
title DOMString q要素のtitle属性

参考文献

Web Hypertext Application Technology Working Group (2022) "Text-level semantics" HTML Living Standard