citeタグ 👉 作品名や題名を表す

HTMLの<cite>タグは、引用された作品のタイトル(作品名や題名)を表します。例えば本の紹介をするときには、本のタイトルを<cite>で囲みます。

<p>私のお気に入りの小説は<cite>指輪物語</cite>です。</p>

これにより読者や検索エンジンのクローラーなどに対して「この部分が引用した作品名だよ」と伝えることができます。

😺主要ブラウザのデフォルトのスタイルでは<cite>内のテキストは斜体で表示されます。

citeタグの使い方

<cite>タグ内に入るのは、以下のような作品のタイトルです。作品らしい作品だけでなく、展示会などのイベントや、訴訟レポートなどの公的な書類に対しても使うことができます。

📘 書籍、論文、エッセイ、詩
🎹 楽譜、曲
✏️ 脚本
🎥 映画、TV番組
🖥 Webサイト、プログラム、サービス
🎮 ゲーム
🗿 彫刻
🏞 絵画
💃 演劇、ミュージカル、オペラ
🏢 展示会、イベント
📄 訴訟レポート
など

引用文の出典として使われる

<cite>タグは、引用文を表す<blockquote>タグと合わせてよく使われます。

<p>私の好きな<cite>フォレスト・ガンプ</cite>という映画に次のような言葉が出てきます。</p>
<blockquote>
  <p>人生はチョコレートの箱、開けてみるまで中身は分からない</p>
</blockquote>

👆引用文の出典を示すような形で<cite>を使うわけですね。<blockquote><cite>を合わせて使う方法は下記リンク先でより詳しく解説しています。

単純に作品名を書くときに使ってもOK

引用文を載せずに「作品名だけを紹介したい」というような場合に使うこともできます。

<h2>好きな映画ベスト5</h2>
<ol>
  <li><cite>レオン</cite>(1995)</li>
  <li><cite>インセプション</cite>(2010)</li>
  <li><cite>ゴッドファーザー</cite>(1972)</li>
  <li><cite>インターステラー</cite>(1995)</li>
  <li><cite>となりのトトロ</cite>(1988)</li>
</ol>

👆このようにリスト内で使うこともできます。

🙅引用文自体を含めない

<cite>に引用文自体を入れることはできません。作品タイトルだけを入れるようにしましょう。

<!-- 👎ダメな例 -->
<p>私の好きな<cite>フォレスト・ガンプには
  「人生はチョコレートの箱、開けてみるまで中身は分からない」</cite>
  というセリフが登場します。</p>

<!-- 👍良い例 -->
<p>私の好きな<cite>フォレスト・ガンプ</cite>には
  <q>人生はチョコレートの箱、開けてみるまで中身は分からない</q>
  というセリフが登場します。</p>

👆ちなみに段落文に引用を含める場合には<blockquote>ではなく<q>タグを使います。

🙅人の名前を含めない

WHATWGの仕様書には以下のように書かれています。

人名は作品のタイトルではない(たとえ人々がその人を作品の一部とみなしたとしても)。
そのため、cite要素を人名をマークアップするために使用してはいけない。

つまり、偉人の名言を引用するときに<cite>偉人の名前</cite>とするのは好ましくありません。偉人の名言が記載されている作品名(伝記のタイトルなど)を<cite>に含めるか、単純に<span>タグを使うのが良いでしょう。

CSSでciteの斜体フォントを変える

主要ブラウザでは<cite>はデフォルトで斜体文字で表示されます。このスタイルはCSSで簡単に変えることができます。例えば、斜体フォントをやめて太字にするサンプルコードを紹介します。

cite {
  font-style: normal; /* 斜体を解除 */
  font-weight: bold; /* 太字に */
}