HTML要素辞書 by Sentaro

<q>

引用（Quote）要素。短いインライン（行内）の引用を示すために使用されます。

info

概要

<q> 要素は、**短い**引用文をインライン（行内）でマークアップするために使用されます。
ブラウザは通常、引用符（例: 「」や“”）を自動的に付与して表示します。これは、長い引用文やブロックレベルの引用に使用する <blockquote> 要素とは異なります。

play_circle

HTML (Source)

シェイクスピアは、 <q cite="https://en.wikipedia.org/wiki/Hamlet"> 生きるべきか、死ぬべきか、それが問題だ。 </q> と言いました。 彼女の言葉は<q>素晴らしい一日でした</q>。

Preview (Result)

シェイクスピアは、生きるべきか、死ぬべきか、それが問題だ。と言いました。

彼女の言葉は素晴らしい一日でした。

list

属性名	説明
cite	引用元のドキュメントやメッセージへのURLを指定します。ブラウザはこのURLをユーザーに表示しませんが、機械が理解するための情報を提供します。

code

1. 引用元URLを指定したインライン引用

<p>
 孫子は兵法で、
 <q cite="https://example.com/art-of-war">
  彼を知り己を知れば百戦して殆うからず
 </q>
 と説いています。
</p>

2. 引用符を自動で付与

<!-- ブラウザが自動で引用符（例: 「...」）を付与します -->
<p>
 友人は「<q>明日またね</q>」と言い残して去った。
</p>

3. 長い引用 (<blockquote>との違い)

<!-- ブロックレベルで長い引用をする場合はこちらを使用 -->
<blockquote cite="https://example.com/speech">
 <p>...長い引用文...</p>
</blockquote>

lightbulb

compare

<blockquote>との使い分け
<q> はインライン要素であり、**短い引用**や文中に組み込まれた引用に使います。一方、<blockquote> はブロック要素であり、段落全体や複数の段落にわたる**長い引用**に使用されます。

format_quote

引用符の自動挿入
<q>要素は、CSSの quotes プロパティやブラウザの言語設定に基づいて、自動的に適切な引用符を挿入します。手動で引用符（" "や「」）をテキスト内に入力する必要はありません。