要素とは

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

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



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



詳細は HTML Living Standard の section 4.5.6 を参照。

表示と既定スタイル

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

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

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

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

HTML5 仕様: 著者名は対象外

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

夏目漱石 の作品である。




夏目漱石の作品 こころ は名作である。




著者: 夏目漱石

作品: こころ

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

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

紛らわしいですが、

や の cite 属性は引用元の URLを指定するもので、要素としての とは別物です。

    
引用された文章...




HTML Living Standard によれば...




    

        
引用された文章...
    
    

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

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

彼は こんにちは と言った。




    
長い引用文がここに入ります。複数段落にもできます。
    
引用元は cite 属性で URL を指定します。




HTML (HyperText Markup Language) は Web ページ記述言語である。




    Contact: info@example.com

    東京都千代田区...

SEO への影響

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

    
記事タイトル
    

        本記事は HTML Living Standard を参考にした。
    

typical な使い方パターン

    
参考文献
    

        
達人プログラマー 第 2 版 - オーム社, 2020
        
リーダブルコード - O'Reilly Japan, 2012
        
HTML Living Standard - WHATWG
    




    
    




    

        君の名は。 レビュー
    
    
新海誠監督の 君の名は。 は...

FAQ

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

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

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