「なんとなく太字にしたい」は卒業しよう。``と``、その深いセマンティックな境界線
フロントエンドの現場で、「ここを太字にしておいて」とデザインカンプを渡されたとき、皆さんは何の迷いもなく``タグを叩いていないだろうか。あるいは、「とりあえず``を使えば検索エンジンに好かれるはず」と、思考停止でマークアップしていないだろうか。
実はこの二つ、見た目こそ同じ「太字」だが、HTML5の仕様レベルでは全くの別物だ。今日は、中級エンジニアなら絶対に押さえておくべき、この両者のセマンティックな（意味論的な）違いと、アクセシビリティの観点から見た「正しい判断基準」について語りたいと思う。
—
1. ``と``：その「意味」の決定的な違い
HTMLの仕様書（WHATWG）を紐解くと、この二つの役割は明確に定義されている。
``：重要性（Importance）
``は「そのコンテンツが文脈の中で非常に重要である」ことを示す。読み上げソフト（スクリーンリーダー）は、このタグを検知すると、通常よりも力を込めた（強調した）読み上げを行う。また、SEOにおいても、検索エンジンは「このページで特に重要なキーワード」として評価の重み付けを行う可能性がある。
``：注目（Stylistic Offset）
一方で``は、文脈上の重要度を変えずに、「他と区別するために視覚的に目立たせる」ためのものだ。例として、ニュース記事のリード文の冒頭数文字や、製品名、あるいはキーボードのキー名などが挙げられる。これらは「重要」というよりは「視覚的に際立たせたい」だけなので、``が適している。
—
2. スクリーンリーダーの裏側で起きていること
なぜ我々がこの使い分けに拘るべきなのか。それは、Webは「目」だけで見るものではないからだ。
スクリーンリーダー（VoiceOverやNVDAなど）を利用しているユーザーにとって、``タグは「ここが重要です」という音声的なサインとして機能する。もし、重要でもない見出しの装飾や、単なる製品名に``を乱用すると、ユーザーは「一体どこが本当に重要な情報なのか」を判断できなくなる。
逆に、``は単なる視覚的なスタイルとして扱われるため、読み上げソフトに特別な強調指示を出さない。「音で聞いた時に、ユーザーに伝えるべき情報の優先度をマークアップで制御する」。これこそが、アクセシビリティにおけるプロの仕事だ。
—
3. 実践：現場で迷わない使い分けサンプル
では、実務でどう使い分けるべきか。以下のコード例を見てほしい。そのままコピーして、自社のスタイルガイドに組み込んでもらって構わない。
注意：
本システムは23時からメンテナンスに入ります。保存していないデータは消失するため、必ず作業を終了してください。
当社の新しいエディタでは、ショートカットキー Ctrl + S を押すだけで、瞬時にクラウドへ同期されます。
この装飾は、意味的な重要度とは無関係です。
—
4. シニアからのアドバイス：迷ったら「どう読むか」を想像する
最後に、実務で迷った時の判断基準を授けておこう。
もし、「HTMLタグを消して、平文（プレーンテキスト）として読み上げたときに、意味が損なわれるか？」と自問自答してみてほしい。
- ``を外すと、「ここが重要だ」というニュアンスが消えて困るなら、それは``だ。
- ``を外しても情報の重要度には影響せず、ただの装飾であるなら、それは``（あるいはCSSのクラス）で十分だ。
そして、最も重要なのは「装飾目的で``を使わない」こと。もしデザイン要件で「ここは太字にしたい」と言われたら、まずはCSSのクラスで解決できないか検討し、次に``を検討する。``は、あくまで「情報構造の優先度」のために取っておく。
こういった細部へのこだわりが、積み重なると巨大な「品質の差」として現れる。チームのコードレビューで見かけたら、ぜひこの基準でフィードバックしてみてほしい。エンジニアとしての視座が、また一つ高まるはずだ。
コメント