``タグの真実：強調（Emphasis）の正体と``との境界線
現場でコードレビューをしていると、未だに「とりあえず斜体（イタリック）にしたいから``を使う」というケースによく遭遇します。あるいは「目立たせたいから全部``」というのもよくある話です。
しかし、HTMLはあくまで「文書の構造」を記述する言語です。CSSによる見た目の制御と混同してタグを選んでいると、スクリーンリーダーを利用するユーザーや検索エンジンのクローラーに対して、誤った情報を伝えてしまうことになります。
今回は、フロントエンドの中級者が意外と見落としがちな``タグの正しい役割と、``タグとの明確な使い分けについて、深掘りしていきましょう。
—
1. ``タグの定義：アクセントによる「文脈の変化」
W3Cの仕様において、``（Emphasis）は「テキストの強調」を表します。ここで重要なのは、「その単語を強調することで、文章全体の意味が変化する」という点です。
例えば、次の2つの文を見比べてみてください。
1. 「私は今日、パスタを食べる。」（事実の伝達）
2. 「私は今日、パスタを食べる。」（他でもなくパスタであることを強調）
2つ目の文では、「パスタ」を強調することで「他のメニューではなくパスタだ」というニュアンスが加わっていますよね。このように、読み上げソフトが読んだ際に、声のトーンが変わるような「アクセント」を付与するのが``の役割です。
ブラウザの裏側で起きていること
ブラウザのデフォルトスタイルシートは、ほとんどの場合``に対して `font-style: italic;` を適用しています。しかし、これはあくまで「デフォルトの表示」に過ぎません。
重要なのはアクセシビリティツリーです。スクリーンリーダーは``タグを見つけると、単なるテキストではなく「強調されている箇所」として認識し、読み上げ時に強弱をつけます。これをCSSで「`em { font-style: normal; }`」として無効化しても、セマンティックな意味（強調）は消えません。見た目を変えるためにタグの役割を捨ててはいけないのです。
—
2. ``との決定的な違い
「じゃあ、``は何なんだ？」という疑問が湧くはずです。
- `` (Emphasis): 文中の「アクセント」。文のニュアンスを変えるために必要。
- `` (Strong importance): 文中の「重要性」。その単語やフレーズが、他の部分よりも重要である（緊急性が高い、あるいは警告であるなど）。
使い分けの鉄則：
もしその単語を削除しても文章の意味が崩壊しないなら、それは装飾的な強調に過ぎません。しかし、その単語が「これがないと文脈が伝わらない」ほど重要であれば``を使うべきです。
—
3. 実践：現場で使うべきベストプラクティス
これらを踏まえて、SEOとアクセシビリティを考慮した綺麗なマークアップの例を作成しました。
重要注意！
プロジェクトの進め方
注意してください。クライアントへの連絡は、
必ずメールで行う必要があります。
また、締切日の変更は
厳禁です。
CSSでのカスタマイズ例
「斜体（イタリック）がデザイン的に合わない」という理由で``を避けるのはナンセンスです。CSSで制御すれば良いだけの話です。
/ 意味は強調だが、見た目は太字にするケース /
em {
font-style: normal; / 斜体を解除 /
font-weight: bold; / 代わりに太字にする /
color: #e67e22; / アクセントカラーで際立たせる /
}
—
シニアエンジニアからの助言
フロントエンド開発において「タグの選択」は、単なるコーディングの作法ではありません。それは、あなたが書いたコードが「誰にどう届くか」を決める設計図です。
- SEO: 検索エンジンは、強調された単語を文脈のキーポイントとして認識します。
- アクセシビリティ: 視覚障がいを持つユーザーが、あなたの書いた文章の「ニュアンス」を正しく受け取れるかどうかは、この小さなタグにかかっています。
「とりあえず`span`でクラスを当てればいいや」と妥協せず、その単語が何のためにそこにあるのかを一度考えてみてください。その小さな積み重ねが、数年後にあなたを「ただのコーダー」ではなく、「設計のできるエンジニア」へと押し上げてくれるはずです。
次にコードを書くとき、``という選択肢があなたの武器になることを期待しています。
コメント