こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。
HTMLを書き始めた頃、「太字にしたいときは``タグ？それとも``タグ？」なんて迷ったことはありませんか？実はこれ、ベテランでもたまにハッとさせられる、HTMLの「心臓部」に関わる重要なテーマなんです。
今日は、見た目だけの「装飾」と、意味を伝える「セマンティック（意味論的）」な強調の違いについて、一緒に紐解いていきましょう。大丈夫、決して難しくありません。身近な例え話でスッキリ理解しちゃいましょう！
—
1. 「見た目」と「意味」は別物だと考える
まず、Webページを作る上で一番大切なルールをお話しします。それは「見た目を決めるのはCSSの仕事、意味を伝えるのはHTMLの仕事」ということです。
例えば、お買い物をするとき、棚に並んでいる商品を見てみてください。
- 「特売！」と書かれた赤いPOP（見た目）
- 商品の裏面に書かれた「アレルギー成分表示」（重要情報）
どちらも目立つようにデザインされているかもしれませんが、「重要度」は全く違いますよね？ HTMLのタグ選びもこれと同じなんです。
2. strong と em：AIや検索エンジンへの「ラブレター」
HTML5において、``と``は単なる太字や斜体を作る道具ではありません。これらは、Googleのロボットや、視覚障がいの方が使う「スクリーンリーダー（画面読み上げソフト）」に対して送る「大事なメッセージ」なんです。
：人生で一番大事なことを伝える
``は「強い重要性」を表します。
例えば、Webサイトの利用規約で「このボタンを押すと課金が発生します」という部分。これは単に目立たせたいのではなく、「ここを見逃すと大変なことになるぞ！」という強い警告ですよね。
：言葉のニュアンスを伝える
``は「強調」を表します。
「私は今日、カレーを食べた」という文で、「今日」を強調すると、「昨日じゃなくて今日だよ！」というニュアンスが伝わりますよね。スクリーンリーダーは、ここを少し声を強めて読み上げてくれます。
3. b と i：デザインのための「スパイス」
一方で、``（Bold）や``（Italic）はどうでしょう。これらは「特に重要ではないけれど、視覚的に目立たせたい」ときに使います。
- ``: 商品名やキーワードなど、太字にしたいけど意味的な重要性までは持たせない場合。
- ``: 専門用語の外国語表記や、心の中の独り言など、雰囲気を変えたい場合。
「じゃあ、どっちを使えばいいの？」と迷ったら、こう考えてみてください。
「もしCSSが全部消えて、文字だけのプレーンな状態になっても、ここは強調されているべきか？」
答えが「YES」なら``や``を。「NO、ただの装飾だよ」なら``や``を選べばOKです！
—
実践コード：こう使い分ける！
実際にコードで見てみましょう。エディタに貼り付けて試してみてくださいね。
ご注意：この設定を変更するとアカウントが削除されます。
私は絶対に、このプロジェクトを成功させたい。
今日のおすすめ商品はりんごです。
—
アクセシビリティを意識するということ
なぜここまでタグの使い分けにこだわるのか。それは、Webが「みんなのもの」だからです。
もしあなたが目の見えない方に向けてWebサイトを作っているとしたら、スクリーンリーダーが「重要です！」と伝えてくれる``の存在は、情報の迷子を防ぐ大切なガイドラインになります。
「HTMLを書く」ということは、単に画面に文字を出すことではなく、「誰にでも正しく情報を届けるためのバリアフリーな道を作ること」なんです。そう考えると、なんだかHTMLを書くのが少し誇らしくなりませんか？
まとめ：迷ったら「意味」に立ち返ろう
最初は覚えることが多くて大変だと思います。でも、迷ったときはこう自分に問いかけてみてください。
「これは、読んでいる人にとって何が大事な情報かな？」
その答えが見つかれば、自然と正しいタグが選べるはずです。最初は間違えても大丈夫。修正していけばいいんですから。
これからも、一緒に楽しくHTMLを学んでいきましょうね！また次の記事でお会いしましょう！
コメント