なぜ今さら `` タグなのか？——CSS時代の「意味論的」な使いこなし術
フロントエンドエンジニアの皆さん、普段のコーディングで `` タグをどう扱っていますか？
「昔は斜体（Italic）にするためだけに使っていたけれど、今はCSSで `font-style: italic` を当てるのが正解でしょ？ だから `` は時代遅れ」
もしそう考えているなら、少しもったいないかもしれません。HTML5以降、`` タグは「単なる見た目の装飾」から、「周囲のテキストとは性質が異なることを示すセマンティックなタグ」へと見事に再定義されました。
今回は、中級者の一歩先を行くために、現代的な `` タグの「正しい使い所」と、ブラウザの裏側で何が起きているのかを紐解いていきましょう。
—
1. `` タグの正しい定義：何を「斜体」にすべきか
HTML5の仕様（WHATWG）において、`` タグは「斜体で表示されるべき範囲」ではなく、「周囲とは異なる声色やトーン、あるいは技術的な文脈を持つテキスト」を囲うための要素とされています。
具体的には、以下のようなケースで使うのが「標準的かつ美しい」セマンティクスです。
- 技術用語や専門用語の外国語表記
- 分類学上の名称（学名など）
- 作品のタイトルや船名
- 心の中の声（独白）
- 特定の用語に対する「引用」的なニュアンス
「見た目が斜体になるから使う」のではなく、「意味があるから `` を使い、結果としてブラウザが斜体でレンダリングする」という主客の関係を忘れないことが重要です。
—
2. ブラウザの裏側で起きていること
ブラウザの内部処理において、`` タグは `font-style: italic` というユーザーエージェントスタイルシートを適用します。しかし、アクセシビリティツリーにおける扱いは `` と同様に「非視覚的なグループ化要素（特にセマンティクスを持たない）」に近い存在です。
ここで注意したいのは、スクリーンリーダーの挙動です。
多くのスクリーンリーダーは `` タグに遭遇しても、特別な読み上げ（「イタリックです」など）は行いません。あくまでテキストの一部としてそのまま読み上げます。つまり、「コンテンツの意味論的な区別をマークアップで示しつつ、アクセシビリティを阻害しない」という非常にクリーンな関係性が成り立っています。
もし、強調して読み上げてほしいのであれば `` や `` を選ぶべきですし、単に「ここは別の文脈である」と構造的に示したいのであれば `` が最適解となるわけです。
—
3. 実践：現場で使えるクオリティの高いコード例
ただ単に `` を使うのではなく、適切なクラス名や属性と組み合わせることで、ドキュメントの品質は格段に上がります。
Next.jsのレンダリング戦略
Next.jsでは、ページ単位で
getServerSideProps
を使うか、
getStaticProps
を使うかで、レンダリングの挙動が大きく異なります。
あるエンジニアは言いました。「この設計は、まさに
Don’t Repeat Yourself
の精神を体現しているね」と。
ポイント解説
- `font-style` の制御: 技術用語など、斜体にすると可読性が落ちるケースでは、迷わず `font-style: normal` を適用してください。それでも `` を使う理由は、「そこが文脈的に特別な意味を持つ範囲である」という構造をHTMLに残すためです。
- `
` タグとの使い分け:`` は「プログラムコードそのもの」を示しますが、`` は「技術用語や概念としての名前」を指す場合に使うと、ドキュメントがより論理的になります。
---
最後に：なぜ「泥臭いこだわり」が必要なのか
Webサイトのソースコードは、後から来るエンジニアへの「手紙」です。
ただの `` が羅列されたコードよりも、`` や ``、`` を正しく使い分けているコードを見ると、「ああ、この人はコンテンツの意味を理解してマークアップしているんだな」と安心感がありますよね。
こうした小さな積み重ねが、長期的なメンテナンス性の向上や、将来的なアクセシビリティ改修のしやすさに直結します。ぜひ、次回のコーディングから「このテキストは、周囲と何が違うんだろう？」と一瞬立ち止まって考えてみてください。その「一瞬の迷い」が、プロフェッショナルなフロントエンドエンジニアへの第一歩です。
コメント