<q要素> - インラインレベルの引用
公開日:
q要素は、内容が、外部から引用したものであることを表す要素です。この要素はインライン要素です。ブロックレベルでマークアップするには、blockquote要素を利用しましょう。
概要
- 名前
- q (Quote)
- カテゴリー
- Flow content
- Phrasing content
- Palpable content
- 配置できる場所
- Phrasing contentが期待される場所。
- コンテンツモデル
- Phrasing content。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLQuoteElement
- デフォルトのスタイル
q { display: inline; } q::before { content: open-quote; } q::after { content: close-quote; }
- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-q-element
属性
cite
引用元のURL、または情報を表す文字列。この属性は表示に反映されない。ユーザー向けではなく、ユーザーエージェント向けの属性である。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
引用したテキストをq要素で囲むことで、それが引用したコンテンツであることを表します。
HTML
<p>クラークの名言に、<q>少年よ、大志を抱け</q>という言葉があります。</p>
引用元の、書籍などの作品名やURLがある場合、cite属性でそれを指定して下さい。これはブラウザには表示されない、ユーザーエージェント向けの情報となります。
HTML
<p>あのウェブサイトには、<q cite="https://syncer.jp/">SEOとかウダウダ言ってる暇があったら手を動かせ</q>という言葉が書いてあった。</p>
q要素とblockquote要素の役割は同じです。違いは、前者がインライン要素で、後者がブロック要素であることです。例えば、テキストの中の一部を引用コンテンツとしてマークアップするにはq要素の方が適しているでしょう。
q要素とblockquote要素の違い
<!-- 間違った例 -->
<div>私は彼が言った、<blockquote>山田君、座布団1ま〜い</blockquote>という言葉が好きだ。</div>
<!-- 正しい例 -->
<p>私は彼が言った、<q>山田君、座布団1ま〜い</q>という言葉が好きだ。</p>
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<cite要素> - 作品のタイトル</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/cite/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>cite要素は、文章で言及されている作品のタイトルをマークアップする要素です。</p>
<p>私が最近好きな本は、<cite>からかい上手の高木さん</cite>というコミックです。この作品は西方君という中学生がいつも…</p>
</body>
</html>