<cite要素> - 作品のタイトル
公開日:
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>