``と``を「見た目」で選んでいないか？——セマンティックな強調の作法
フロントエンド開発の現場で、HTMLのタグ選定について深く議論することは、実はコードの品質を左右する「職人芸」の領域です。
さて、皆さんは``と``の使い分けに迷ったことはありませんか？
「とりあえず太字にしたいから``」「少し斜体にしたいから``」という動機で選んでいるなら、それは少しだけ見直しが必要です。ブラウザのデフォルトスタイル（User Agent Stylesheet）に甘んじていると、アクセシビリティやSEO、そして何より「文書の構造」を損なうリスクがあるからです。
今日は、中級エンジニアの皆さんが明日から自信を持ってタグを選べるよう、この二つのセマンティックな本質を解き明かします。
—
1. 概念の整理：強調（Emphasis）と重要性（Importance）
W3Cの仕様書を紐解くと、この二つの違いは極めて明快です。
- `` (Emphasis)： 文脈の中で、話し手のニュアンスや声のトーンが変わるような「強調」を指します。読み上げソフトでは、文脈によって声の抑揚（ピッチ）を変えて表現されます。
- `` (Importance)： 文中において、「これがないと文脈が成立しない」ほど強い「重要性」や「緊急性」を指します。読み上げソフトでは、より力強く、あるいは低く重厚なトーンで読み上げられます。
よくある誤解
「``は太字になるから使う」という考え方は捨てましょう。CSSの`font-weight: bold;`は見た目の指定に過ぎず、``タグそのものは「ここが重要だ」という情報を検索エンジンや支援技術に伝達するための「構造のマーカー」なのです。
—
2. スクリーンリーダーはどう振る舞うか？
視覚障害を持つユーザーにとって、スクリーンリーダー（VoiceOverやNVDAなど）は情報を得るための唯一の窓口です。
- ``の場合： 読み上げ速度やピッチを調整し、いわゆる「強調」としてのニュアンスを音声に反映させます。
- ``の場合： 「重要」というメタデータを伝え、強調よりもさらに強いアクセントを加えます。
もし、単に見た目を斜体や太字にしたいだけなら、タグで囲むのではなく、CSSの`font-style`や`font-weight`を使うのがフロントエンドの作法です。「意味」を持たない装飾のためにHTMLを汚染してはいけません。
—
3. 実践：現場で迷わないためのコードサンプル
現場でよくあるシーンを想定して、セマンティックに正しいマークアップ例を作成しました。ぜひエディタにコピペして、検証ツールで確認してみてください。
このプロジェクトは、単に速いだけでなく、極めて直感的なUIが求められています。
警告： この操作を取り消すことはできません。必ずバックアップを確認してください。
私たちは 革新的な体験 を創造します。
—
まとめ：タグ選びは「文脈」を翻訳する作業
結論として、僕が現場の後輩によく伝えるのは「その単語を読み上げるとき、声のトーンを変えるか、あるいは重みを置くか？」という自問自答です。
- その言葉にアクセントを置いて読ませたいか？ → ``
- その言葉が文中で最も重要なメッセージか？ → ``
- 単にデザイン上のアクセントか？ → `` と CSS
フロントエンドの仕事は、コードを書くことそのものよりも、「どのような意図をブラウザやユーザーに伝えるか」というコミュニケーションの設計に近いものです。
明日からのマークアップで、少しだけ「このタグは本当に意味があるか？」と立ち止まってみてください。その積み重ねが、あなたの書くコードを、誰からも信頼される「プロのコード」へと進化させるはずです。
もし実装で悩んだら、いつでもまた聞きに来てください。一緒に最高のUIを構築していきましょう。
コメント