【実務・中級編】citeタグによる作品のタイトル参照 – HTML実践ガイド

もしあなたがそう考えているなら、少しだけ立ち止まって考えてみてください。検索エンジンやスクリーンリーダーは、その文字列が「ただの強調」なのか、それとも「何らかの作品のタイトル（参照）」なのかを判断する術を失っています。

今回は、HTMLにおける隠れた実力派、`` タグの正しい使い方と、なぜ私たちがこれを使うべきなのか、その哲学を紐解いていきます。

—

`` タグの本来の定義とブラウザの挙動

HTML仕様書によると、`` は「作品のタイトル（引用元）」を示すための要素です。ここで重要なのは、「引用そのもの（blockquote）」ではなく、「引用のソース（タイトル）」を指すという点です。

ブラウザはどう解釈しているのか？

多くのブラウザのデフォルトスタイルシートでは、`` タグ内のテキストは `font-style: italic;`（イタリック体）としてレンダリングされます。

しかし、ここでエンジニアが陥りやすい罠があります。「イタリックにするためのタグ」だと勘違いすることです。

1. 意味論（セマンティクス）の分離: ブラウザがイタリックにするのは、あくまで「標準的な慣習」に過ぎません。ユーザーエージェント（スクリーンリーダー等）は、この要素を「作品名」として認識し、読み上げの際に文脈を補完します。
2. CSSとの関係: もしデザイン上の都合で「作品タイトルを斜体にしたくない（ボールドにしたい、あるいは色を変えたい）」という要望が来ても、`` タグを使うべきです。`font-style: normal;` を当てれば解決します。タグの意味を変えてはいけません。

—

現場で即戦力となる実装パターン

では、実務でどのように使い分けるのが「プロの仕事」と言えるのか。以下のサンプルを見てください。よくある「書籍紹介」のコンポーネントを想定しています。

この実装のポイント

• 意味の明示: 文中に登場する作品名を `` で囲むことで、機械可読性が向上します。
• リンクとの組み合わせ: 参考文献のリストなど、外部リソースへのリンクが含まれる場合、`` タグの外側、あるいは内側に `` を置くのが標準的です。特に「作品そのもの」がリンク先であれば、上記のサンプルのように `` を含めるのが非常に合理的です。