「とりあえず``で太字に」は卒業しよう。HTML5的・セマンティックな強調の作法
フロントエンド開発の現場で、コードレビューをしていると時折見かけるのが「見た目さえ整えばいい」というスタンスでマークアップされたHTMLです。特に強調や装飾にまつわるタグは、その典型例でしょう。
「``も``も、どっちも文字が太くなるんだから同じでしょ？」
もしあなたがそう思っているなら、少しだけ立ち止まってください。ブラウザは、あなたが書いたタグの「意味」を、画面越しに世界中へ伝えています。今回は、HTML5以降のセマンティックな強調の使い分けと、アクセシビリティの観点から「なぜ今の書き方を選ぶべきか」を深掘りします。
1. 意味の重さを整理する：strong/em vs b/i
HTML5以前の定義は曖昧でしたが、現在の仕様では役割が明確に分断されています。
- ``: コンテンツの「重要性」「深刻さ」「緊急性」を示す。
- ``: コンテンツの「強調（ストレス）」を示す。読み上げる際の抑揚が変わるイメージ。
- ``: スタイル目的（太字）。意味的な重要性はなく、単に目立たせたいだけの場合。
- ``: スタイル目的（斜体）。専門用語、学名、心の中の独白など、周囲と区別したい場合。
重要なのは、「見た目の太さや斜体は、CSSに任せるべき」という原則です。``や``は、スクリーンリーダー（読み上げソフト）が「ここを強調して読む」という指示を受け取るためのフックになります。
2. ブラウザの裏側で起きていること
ブラウザのユーザーエージェントスタイルシートでは、``には`font-weight: bold;`、``には`font-style: italic;`が適用されています。
しかし、ブラウザにとって重要なのはCSSのプロパティよりも、DOMツリー上のセマンティクスです。例えば、``で囲まれたテキストは、スクリーンリーダーによって「重要（Strong）」というメタ情報と共に読み上げられます。視覚障害を持つユーザーにとって、この「強調の重み」は、情報の優先順位を判断する重要な手がかりなのです。
もし、単なる装飾に``を乱用すると、スクリーンリーダーは「重要でもない場所」をすべて強調して読み上げてしまい、ユーザーは情報の取捨選択ができなくなります。これが「セマンティックなマークアップ」が求められる最大の理由です。
3. 実践：使い分けのベストプラクティス
現場で役立つ、クリーンなマークアップのサンプルコードを作成しました。
注意： 本サービスの利用には、必ず最新のブラウザ環境が必要です。
私たちは、ただコードを書くだけではありません。情熱を持ってプロダクトを磨き上げます。
商品コード：AX-9928
今回のプロジェクトでは、アジャイルという手法を採用します。
また、学術名である Homo sapiens についても調査が必要です。
現場で意識すべきTips
- CSSでの制御を前提にする: ``を使っても、デザイン上太字にしたくない場合はCSSで`font-weight: normal;`を当てればいいだけです。タグそのものを変える必要はありません。
- 見出しタグとの関係性: 見出し（`
`〜`
`）の中に``を入れるのは、基本的には冗長です。見出し自体がすでに「重要」な要素だからです。 アクセシビリティの検証: Chromeのデベロッパーツールで「Accessibility」ツリーを確認してください。自分が置いたタグが、スクリーンリーダーからどう見えているか、常に意識する癖をつけましょう。 最後に：コードはラブレターである
マークアップは、単なるWebページの骨組みではありません。それは、検索エンジン（クローラー）や、支援技術を必要とするユーザー、そして未来の自分に向けた「ラブレター」です。
「この要素にはどんな意味があるのか？」
この問いを繰り返すだけで、あなたの書くHTMLは格段に美しく、誰にとっても優しいものに変わります。今日から、``を叩く前に一度だけ「これは本当にただの装飾か？」と自問自答してみてください。その小さな積み重ねが、トップエンジニアへの近道です。
コメント