``タグは「太字にするボタン」じゃない。セマンティクスから紐解く正しい使い方
現場でコードレビューをしていると、未だに「ここを太字にしたいから``で囲っておこう」というプルリクエストに出くわすことがあります。
結論から言います。それはCSSの役割です。
``タグは、単なる見た目の装飾ツールではありません。それは「このコンテンツはドキュメントの中で特に重要である」という情報を、ブラウザやスクリーンリーダーに伝えるための「意味」そのものです。今回は、中級エンジニアなら絶対に押さえておくべき``タグの真の姿と、現場での正しい使い分けについて深掘りしていきましょう。
—
1. なぜ「太字＝strong」ではないのか
ブラウザのデフォルトスタイルシート（User Agent Stylesheet）を見ると、確かに``には`font-weight: bold;`が当たっています。これが「太字＝strong」という勘違いを生む最大の原因です。
しかし、HTMLの仕様書（HTML Living Standard）を読み解くと、その定義は極めて厳格です。
> The strong element represents strong importance for its contents.
ここで重要なのは、「重要性（Importance）」という文脈です。
例えば、ユーザーに「ここを読まないと操作を間違える」という警告や、検索エンジンに対して「この記事の核となるキーワード」を伝えるために使うのが本来の目的です。単にデザインとして文字を強調したいだけなら、それはCSSの`font-weight: 700;`で制御すべきです。
現場での判断基準
- 文脈的に重要か？ → 「この文全体において、この単語が欠けたら意味が大きく変わる」なら``
- ただのデザインか？ → 「見出しのコントラストを上げたい」「ブランドカラーを目立たせたい」ならCSS
—
2. ブラウザが裏側でやっていること
ブラウザやアクセシビリティ・ツリーは、``タグを検知すると、単にフォントを太くするだけではありません。スクリーンリーダー（音声読み上げソフト）は、``で囲まれた箇所を「重要」な箇所として、少し強調したイントネーションやトーンで読み上げることがあります。
もし、デザインのためだけに``を乱用すると、視覚障害を持つユーザーに対して「ここは人生で一番大事なことですよ！」という誤った情報を伝えてしまうことになります。これはアクセシビリティの観点から見れば、立派なバグです。
—
3. 実践：セマンティックに書くためのベストプラクティス
では、実務でどのように使い分けるのが正解でしょうか。コード例を見てみましょう。
この設定を保存すると、取り消すことはできません。
必ず内容を確認してください。
私たちのサービスは最高です。
CSSで制御する綺麗な実装例
デザイン要求と意味論を分離するための、現場でよく使うパターンを紹介します。
ログインが必要です。
24時間以内に手続きを行ってください。
—
4. さらに一歩進んだTips：``タグとの使い分け
最後に、よく質問される「``タグとの違い」について。
HTML5以降、``タグは「重要ではないが、注目させるためのテキスト（キーワードなど）」と再定義されました。
- ``: 強い重要性がある。文脈の中で「重要だ」と強調する。
- ``: 意味的な重みはないが、視覚的に惹きつけたい（例：記事内の単語、商品名など）。
もしあなたが、「重要ではないけれど、なんとなく目立たせたい」という箇所に``を使っているなら、それは``に変えるか、CSSで`font-weight`を調整するタイミングかもしれません。
—
最後に：コードの「意味」を大切に
フロントエンド開発が高度化する中で、私たちが提供するのは単なる「見た目」ではなく「体験」です。コード一つ一つに、「なぜこのタグを選んだのか」という明確な理由を持つこと。それが、ジュニアから一皮剥けたシニアエンジニアになるための第一歩です。
明日からのコーディングで、``というタグと一度向き合ってみてください。「これは本当に、ユーザーにとって『強い重要性』を持つ情報か？」と。その問いかけこそが、あなたの作るWebサイトの品質を一段引き上げてくれるはずです。
コメント