SYNCER

SYNCER

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

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>