＜cite要素＞ - 作品のタイトル

公開日: 2017/02/09

cite要素は、言及されている作品のタイトルを表す要素です。タイトルとは本、詩、歌、脚本、映画、テレビ番組、ゲーム、絵画、演劇、コンピュータプログラムなど様々です。必ずしも引用元として使う必要はありません。人名をマークアップしてはいけません。

概要

名前

cite

カテゴリー

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

cite {
	font-style: italic;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-cite-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

例えば、そのテキストで言及している作品のタイトルをマークアップするのが典型的な使い方です。

HTML

<p>私が好きな小説は、<cite>天使の囀り</cite>だ。これはホラー小説家の貴志祐介の作品である。謎の死を遂げていった人たちに共通しているのは、誰もが死の直前に「天使の羽ばたく音を聞いた」と語っていること。そこから…</p>

作品のタイトル以外の部分を含めてマークアップするのは適切ではありません。あくまでも作品をマークアップする要素と認識しましょう。

HTML

<!-- タイトル以外を含めてはいけない -->
<p>私が好きなのは、<cite>天使の囀りという小説</cite>だ。</p>

cite(和訳で引用)という名前で勘違いしてしまいがちですが、この要素に引用の意味付けはありません。引用したテキストなどをマークアップするには、代わりにq要素やblockquote要素を使って下さい。もちろん、引用元のタイトルをマークアップするのは正しい使い方です。

HTML

<!-- 間違った例 -->
<p><cite>これからの集客は検索エンジンに頼るべきではない</cite>、彼は戯言を行った。</p>

<!-- 正しい例 -->
<p><q>これからの集客は検索エンジンに頼るべきではない</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>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/604/"> <meta charset="utf-8"> <title>【デモ】＜cite要素＞ - 作品のタイトル</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/cite/"> </head> <body>

<p>cite要素は、文章で言及されている作品のタイトルをマークアップする要素です。</p> <p>私が最近好きな本は、<cite>からかい上手の高木さん</cite>というコミックです。この作品は西方君という中学生がいつも…</p>

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

<style>

body { background-color: #fff ; }

</style>

</script>