【実務・中級編】emタグとiタグのセマンティックな違い – HTML実践ガイド

正直に言います。かつては僕もそうでした。CSSで`font-style: italic;`を当てるより手っ取り早いし、見た目も同じになる。しかし、シニアエンジニアとしてチームのコードレビューをする今、その考え方は「技術的負債の入り口」だと断言できます。

HTMLタグは、単なるデザインのツールではありません。ブラウザやスクリーンリーダーといった「マシン」に、そのテキストが持つ意味（セマンティクス）を伝えるための重要なインターフェースです。今回は、混同されがちな`em`と`i`の決定的な違いと、プロとしての使い分けを解説します。

—

1. `em`：その強調は「声のトーン」を変えるか？

`em`（Emphasis）は、「強調」を表すタグです。

スペック上の定義では「テキストの強勢」を意味します。つまり、文章を読み上げる際、その部分を少しだけ強く読んだり、あるいは語調を変えたりする必要がある箇所に使うものです。

• 使い方の例： 「私は、絶対にそれを許さない」という文脈で、「絶対に」を強調する場合。
• ブラウザの挙動： スクリーンリーダーは、このタグを検知して読み上げのアクセントを調整します。単なる見た目の装飾ではなく、情報の重要度（意味の強度）をブラウザに伝えているのです。

2. `i`：斜体はあくまで「補助」

一方で`i`（Idiomatic）タグはどうでしょうか。HTML5以降、`i`は「斜体（Italic）」という役割から解き放たれ、「他とは異なる声色や性質を持つテキスト」というセマンティックな役割を与えられました。

具体的には以下のようなケースで使います。

• 専門用語（生物学的な名称など）
• 心の中の声（独り言）
• 外国語のフレーズ
• 作品のタイトル（これは`cite`でも良いですが、文脈によります）

つまり、`i`は「ここだけ周囲のテキストと性質が違うよ」というラベルであり、強調（重み付け）とは全く別のレイヤーの話なのです。

—

3. 実践：現場で使えるベストプラクティス

これらを踏まえた、メンテナンスしやすく意味的に正しいマークアップ例です。そのままエディタに貼り付けて、アクセシビリティの観点を確認してみてください。

このプロジェクトの成功には、チーム全員のコミットメントが不可欠です。

庭に咲いているのは Viola mandshurica （スミレの一種）です。

会議室のドアの前で、私はこう思った。
（また、この議題か……早く終わらないかな）

—

なぜこの使い分けが重要なのか

多くのエンジニアが「ブラウザで見た目が同じならどっちでもいいじゃん」と考えがちです。しかし、アクセシビリティ対応が必要なWebアプリケーションにおいて、この差は致命的です。

1. スクリーンリーダーの挙動： `em`は読み上げに抑揚がつき、ユーザーは情報の重要性を理解できます。`i`はあくまで「言葉の性質が変わった」ことを伝えるのみです。
2. 将来の保守性： もし将来的に「強調箇所を赤字にする」というデザイン変更が来た時、`em`を使っていればCSSの`em { color: red; }`だけで一括更新できます。逆に、ただ斜体にしたくて`i`を使っていたら、その中から強調部分だけを抽出し直すという地獄の作業が待っています。

最後に：シニアからのアドバイス

「タグ一つでそんなに変わるのか？」と思うかもしれません。しかし、「なぜそのタグを選んだのか？」という問いに対して、デザイン以外の理由を即座に答えられること。これが、中級者からシニアへとステップアップするための境界線です。

HTMLは、僕たちがブラウザに対して行う最初の「対話」です。その対話を疎かにせず、意味のあるマークアップを積み重ねていくことで、結果として検索エンジンにも、そして何よりユーザーにも優しい、最高品質のWebサイトが出来上がります。

今日のコードレビューからは、ぜひ`i`タグと`em`タグの使い分けに意識を向けてみてください。細かいこだわりが、あなたのエンジニアとしての信頼を確実に積み上げていくはずです。