<q>

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

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

書式

<q>
  <!-- phrasing content  -->
</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のプロパティを指定する。セミコロンで区切って複数のプロパティを指定することもできる。
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.

内容

q要素の内容には記述コンテンツを含めることができる。具体的には次の要素である。

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属性

HTMLタグ

参考文献

WHATWG. (2021). "Text-level semantics" HTML Living Standard