「その `` タグ、本当に必要？」——意味論と装飾を分かつ、現代のHTML作法
フロントエンド開発の現場で、ふとコードを見返したときに「あれ、なんでここ `` なんだっけ？」と立ち止まったことはありませんか？
HTMLを書き始めた頃、「太字にしたいなら ``、斜体にしたいなら ``」と教わった方も多いはずです。しかし、Web標準の歴史において、これらの要素は「見た目の装飾」から「意味論（セマンティクス）」を担う要素へと、過酷な変貌を遂げてきました。
今日は、中級エンジニアの皆さんが「なぜ今、そのタグを使うのか」を自信を持って語れるよう、歴史的経緯を紐解きつつ、現代のベストプラクティスを共有します。
—
1. 歴史の闇とセマンティクスの夜明け
HTML 4.01以前、Webは「見た目」を整えるために混沌としていました。``（Bold）や ``（Italic）は、ブラウザに「太くしろ」「斜めにしろ」と命令する単なるスタイル指定タグでした。
しかし、HTML5の登場により、W3CはHTMLから「見た目」を剥ぎ取り、「意味」だけを記述する言語へと進化させました。
- ``: 以前は「太字」だったが、現在は「注意を引くが、強調（importance）の度合いは高くないもの」。
- ``: 以前は「斜体」だったが、現在は「声のトーンが変わるもの（専門用語、学名、心の声など）」。
- `
`: 以前は「打ち消し線」だったが、現在は「もはや正確ではない情報」。
「見た目」の制御は、100% CSSに任せる。HTMLは「そこに何があるか」を伝えるために存在する。 この原則を忘れると、スクリーンリーダーを使うユーザーや、将来のAIクローラーにとって「ノイズだらけの文書」になってしまいます。
—
2. 実務で直面する「意味論と装飾」のジレンマ
とはいえ、現場では「ここはどうしても太字にしたいが、強調（``）ではない」というケースが多々あります。ここで、「だから `` を使えばいいよね」と考えるのは早計です。
CSSには、意味を変えずに見た目だけを変える強力な武器があります。
現代のベストプラクティス：CSSによる制御
意味的な重要性を持たない「ただの強調」は、`` にクラスを付与し、CSSで制御するのが最も堅牢です。
/ 意味論的にはspanだが、見た目だけ太くする /
.text-bold {
font-weight: 700;
}
/ 意味論的にはspanだが、斜体にする /
.text-italic {
font-style: italic;
}
—
3. 実践コード：正しい「意味」の使い分け
以下は、実務でよくあるパターンを、セマンティクスを意識して書き直した例です。コピペして、ブラウザのインスペクタで確認してみてください。
注意: iPhoneはアップル社の登録商標です。
注意:
iPhoneはアップル社の登録商標です。
この部分は特に重要ではないが目立たせたい箇所です。
—
4. ブラウザは裏側でどう処理しているのか？
ブラウザのレンダリングエンジンは、タグごとの「デフォルトスタイル」を持っています。例えば、Chromeでは `` に `font-weight: bold` が当たっています。
しかし、重要なのは、アクセシビリティツリーの構築です。`` や `` を使うと、支援技術（スクリーンリーダー）に対して「ここは強調されている部分だ」というメタデータが伝わります。逆に、単なる `` に CSS で `font-weight: bold` を当てても、スクリーンリーダーはそれを「普通のテキスト」として読み上げます。
「機械にどう伝わっているか」を想像できること。これがシニアへの第一歩です。
—
5. まとめ：明日から使える指針
1. `` / ``: 重要な箇所、強調したい箇所に使う（SEO的にも重要）。
2. `` / ``: 装飾ではなく、意味的な区切り（専門用語や注意喚起）として使う。
3. `` + CSS: 「ただ見た目を太くしたいだけ」の装飾にはこれ一択。
4. ``: 価格の変更など、「古い情報」であることを示すときに使う。
「タグは何を使うべきか？」と迷ったら、「もしCSSが読み込めなかったとき、このタグの意味はコンテンツの理解を助けるか？」と自問してみてください。
HTMLは単なるテキストの器ではありません。Webという巨大な情報の海を航海するための「地図」です。その地図を正しく書くことが、私たちフロントエンドエンジニアに課せられた、最も基本的で、かつ最も崇高な責務なのです。
さあ、今日のコードから、余計な `` をひとつ、剥がしてみませんか？
コメント