この記事の要点

<cite> は作品タイトルの参照を示すインライン要素 (書名、映画、論文、楽曲、記事タイトル等) デフォルトでイタリック表示。CSS で font-style: normal に変えても良い 著者名ではなく作品名専用。HTML5 仕様で著者名は対象外と明記 <blockquote cite="URL"> の cite 属性は別物 (引用元 URL を指定) 関連要素: <q> 短い引用 / <blockquote> ブロック引用 / <dfn> 定義語 / <address> 連絡先

<cite> 要素とは

<cite> 要素は、創作物 (書籍、論文、映画、楽曲、絵画、Webサイト、ブログ記事等) のタイトルへの参照を示すインライン要素です。デフォルトのスタイルはイタリック (italic) です。

<p>
夏目漱石の代表作 <cite>こころ</cite> は、明治末期の精神を描いた小説である。
</p>

<p>
映画 <cite>君の名は。</cite> は新海誠監督の作品で、興行収入 250 億円を記録した。
</p>

<p>
詳細は <cite>HTML Living Standard</cite> の section 4.5.6 を参照。
</p>

表示と既定スタイル

ブラウザの既定 CSS では <cite> はイタリックで表示されます。日本語フォントにはイタリック体が無いことも多く、その場合は斜体合成 (oblique) で代用されます。

/* ブラウザのデフォルト */
cite {
    font-style: italic;
}

/* 日本語サイトでイタリックが気持ち悪いとき */
cite {
    font-style: normal;
    color: #4f46e5;
}

/* 書名を「」で囲む見た目に */
cite::before { content: "『"; }
cite::after  { content: "』"; }
cite { font-style: normal; }

HTML5 仕様: 著者名は対象外

HTML4 までは <cite> に著者名も含めて良いとされていましたが、HTML5 仕様では「作品のタイトル」のみと限定されました。著者名は対象外です。

<!-- ❌ HTML5 では推奨されない -->
<p>
<cite>夏目漱石</cite> の作品である。
</p>

<!-- ✅ 作品名のみ -->
<p>
夏目漱石の作品 <cite>こころ</cite> は名作である。
</p>

<!-- 著者名を強調したいときは別タグで -->
<p>
著者: <span class="author">夏目漱石</span><br>
作品: <cite>こころ</cite>
</p>

ただし、WHATWG の HTML Living Standard と W3C HTML5 で解釈に差がある時期もあり、現実のサイトでは著者名を <cite> で囲む例も残っています。仕様準拠を厳格にするなら作品名のみが正解です。

blockquote cite="..." 属性との違い

紛らわしいですが、<blockquote> や <q> の cite 属性は引用元の URLを指定するもので、要素としての <cite> とは別物です。

<!-- cite 属性 = 引用元 URL (画面には表示されない) -->
<blockquote cite="https://example.com/article/123">
    <p>引用された文章...</p>
</blockquote>

<!-- cite 要素 = 作品名 (画面に表示される) -->
<p>
<cite>HTML Living Standard</cite> によれば...
</p>

<!-- 両方を組み合わせ -->
<figure>
    <blockquote cite="https://example.com/article/123">
        <p>引用された文章...</p>
    </blockquote>
    <figcaption>
        — <cite>WHATWG HTML Standard</cite>
    </figcaption>
</figure>

関連する引用系要素まとめ

要素	用途	表示
<cite>	作品タイトル参照	インライン / イタリック
<q>	短い引用 (1 行以内)	インライン / 引用符が自動付与
<blockquote>	ブロックレベルの長い引用	ブロック / インデント
<dfn>	用語の定義箇所	インライン / イタリック
<address>	連絡先情報	ブロック / イタリック

<!-- q: 短い引用 (引用符は自動で付く) -->
<p>
彼は <q>こんにちは</q> と言った。
</p>

<!-- blockquote: ブロック引用 -->
<blockquote cite="https://example.com/source">
    <p>長い引用文がここに入ります。複数段落にもできます。</p>
    <p>引用元は cite 属性で URL を指定します。</p>
</blockquote>

<!-- dfn: 用語の定義 -->
<p>
<dfn>HTML</dfn> (HyperText Markup Language) は Web ページ記述言語である。
</p>

<!-- address: 連絡先 -->
<address>
    Contact: <a href="mailto:info@example.com">info@example.com</a><br>
    東京都千代田区...
</address>

SEO への影響

<cite> 要素自体が直接 SEO ランキングに影響することはほぼ無いと考えられていますが、構造化データと組み合わせると効果的です。

<!-- 引用記事の構造化データ -->
<article itemscope itemtype="https://schema.org/BlogPosting">
    <h1 itemprop="headline">記事タイトル</h1>
    <p>
        本記事は <cite itemprop="citation">HTML Living Standard</cite> を参考にした。
    </p>
</article>

<!-- JSON-LD で書く方が現代的 -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "citation": [
        { "@type": "CreativeWork", "name": "HTML Living Standard" }
    ]
}
</script>

typical な使い方パターン

<!-- ブログ記事の参考文献 -->
<section class="references">
    <h2>参考文献</h2>
    <ul>
        <li><cite>達人プログラマー 第 2 版</cite> - オーム社, 2020</li>
        <li><cite>リーダブルコード</cite> - O'Reilly Japan, 2012</li>
        <li><cite>HTML Living Standard</cite> - WHATWG</li>
    </ul>
</section>

<!-- 画像のキャプション -->
<figure>
    <img src="painting.jpg" alt="星月夜">
    <figcaption>
        Vincent van Gogh, <cite>The Starry Night</cite>, 1889
    </figcaption>
</figure>

<!-- レビュー記事 -->
<article>
    <h1>
        <cite>君の名は。</cite> レビュー
    </h1>
    <p>新海誠監督の <cite>君の名は。</cite> は...</p>
</article>

FAQ

Q: <cite> と <i>、どう使い分ける?
A: <cite> は作品タイトル、<i> は外来語・専門用語・思考など。両方ともデフォルトはイタリックですが意味が違います。

Q: イタリック表示が日本語サイトで違和感ある
A: CSS で cite { font-style: normal; } または cite::before/::after で『』記号を付けると日本語サイトに馴染みます。

Q: <cite> のネストは可能?
A: 仕様上は可能ですが、通常そうする意味はありません。フレージング・コンテンツなので <cite> 内に <a> や <span> 等は配置できます。