<cite> 要素は難しい

数ある HTML 要素の中でもっとも使い方に悩むのが <cite> 要素だと思います。

<cite> 要素は作品のタイトルを表すとされています。HTML 3.2 や HTML 4.01 の時代は引用や参照で使われるとされており、<blockquote> や <q> 要素と組み合わせての使用、あるいは参考文献一覧で使うことが想定されていましたが、現在の HTML では通常の文中で使っても良いとされ、また作品の対象も本に限らず新聞、映画、TV 番組、コンピュータープログラムなど幅広い範囲に使用できます。

では <cite> 要素を使うメリットはなんでしょうか。<span> 要素ではダメなのでしょうか。

HTML Accessibility API Mappings 1.0 では、<cite> 要素の WAI-ARIA 1.2 対照 は No corresponding role とされています。<code> や <em> と異なり、アクセシビリティマッピング的にはとくにメリットはなさそうです。

HTML 仕様におけるレンダリング提案 は font-style: italic となっており、実際各ブラウザではイタリック体で表示されます。日本語の場合、斜字での表現は通常行わないので、カギ括弧で囲う表現がよく行われます。制作者スタイルシートで再現するならこんな感じになります。

cite:lang(ja) {
	font-style: normal;

	&::before {
		content: "「";
	}

	&::after {
		content: "」";
	}
}

大きなメリットがあるとまではいえませんが、専用の要素が定義されていることによって、以下の効用は発生します。

• <span> 要素だとクラスを考える必要があるが、専用の要素なら省略できる（制作者にとってのメリット）
• ブラウザ設定で制作者スタイルシートを適用しない環境において、斜字で表示されるため前後のテキストとの区別が容易にできる（閲覧者にとってのメリット）

では雑誌を表す場合はどうすれば良いのでしょうか。以下の文章を例に考えてみます。

日本では映画や小説、漫画など創作物の作品名は二重カギ括弧で表現する文化があります。すなわち、雑誌名と作品名はスタイルとしても区別する必要があります。

<p>
  4月17日に発売された<cite class="cite -magazine">週刊少年サンデー</cite>2024年21号の<cite class="cite -work">シブヤニアファミリー</cite>には、
  <cite class="cite -work">かってに改蔵</cite>のとあるキャラクターが14年ぶりに登場した
</p>

結局 <cite> 要素にもクラスを設定する必要に迫られました。

また、雑誌は雑誌名だけではなく何年何月号、あるいは通巻番号といった情報が重要になることも多いです。とすると、

<cite class="cite -magazine">週刊少年サンデー</cite>2024年21号

よりも

<cite class="cite -magazine"><span class="cite__name">週刊少年サンデー</span>2024年21号</cite>

の方が良さそうな気もします。しかしどちらが好ましいか仕様書から読み取ることはできません。

個人的な解釈では、HTML 仕様としてはどちらでもよく、文脈によると考えています。すなわち前述の例文のように特定の号数であることが重要な場合は全体を <cite> 要素で囲み、一方で「週刊少年サンデー2024年21号」と「週刊少年マガジン2024年21号」を比較言及するようなケース（文中に「2024年21号」が含まれているもののそこは重要ではない場合）は、雑誌名のみを <cite> 要素にすれば良いと思います。

しかし個人サイトなら統一的な考えのもと運用が可能としても、複数人がマークアップに関わるサイトの場合、このような使い分けをプロジェクト内で周知・継続するのは困難な道のりになることが予想されます。

現在の HTML 仕様において <cite> 要素を使いこなすのは難しいという話でした。