こんにちは！フロントエンドの世界へようこそ。
HTMLを学び始めると、似たような役割を持つタグが多くて「結局どれを使えばいいの？」と迷ってしまうこと、ありますよね。特に `` と `` は、どちらも文字を強調する時に使うタグなので、「どっちを使っても同じじゃない？」と思われがちです。
でも、ここを少し意識するだけで、あなたの書くHTMLは、検索エンジンやスクリーンリーダー（視覚障がいのある方のための読み上げソフト）にとって、ぐっと「親切なコード」に変わります。
今日は、この2つの違いを、日常の「ちょっとした工夫」に例えて紐解いていきましょう。
—
1. `` と `` の「役割」をイメージしてみよう
まずは、この2つを「カフェでの注文」に例えてみます。
``（Emphasis：強調）は「声のトーン」
`` は、文章の中で「声の調子を変えて読むべき場所」です。
例えば、「このコーヒー、本当に美味しいね！」と言うとき、少しだけ声を強めたり、間を置いたりしませんか？ そうすることで、相手に「美味しさが伝わっている」というニュアンスを届けますよね。
- 役割： 文脈上の「アクセント」
- 視覚： ブラウザでは標準で「斜体（イタリック）」になります。
``（Strong importance：重要性）は「太字のマーカー」
一方で `` は、「ここを見逃さないで！」という重要ポイントです。
テストの暗記用ノートに蛍光ペンで線を引いたり、契約書の「※必ずお読みください」という部分を太字にしたりするイメージです。声のトーンというよりは、「情報の重み」そのものですね。
- 役割： 内容の「重要度」
- 視覚： ブラウザでは標準で「太字」になります。
—
2. なぜ使い分ける必要があるの？
「でも、CSSで見た目を変えればどっちも同じ太字にできるよね？」と思った方、鋭いです！その通り、見た目だけならCSSでどうとでもなります。
しかし、HTMLの目的は「意味を伝えること」にあります。ここで登場するのが、スクリーンリーダーという「目の代わりとなってWebページを読んでくれるツール」です。
- `` があると： 音声読み上げソフトは「少し声を強調して」読み上げます。聞き手は「ああ、ここは話し手の感情が乗っているんだな」と理解できます。
- `` があると： 音声読み上げソフトは「ここは特に重要です！」という雰囲気で、より強く、はっきりと読み上げることがあります。
機械に「ここは大事ですよ」「ここは少しニュアンスが違いますよ」と正しく教えることは、Webアクセシビリティ（誰にとっても使いやすいWeb）の第一歩なんです。
—
3. 実践コードで確認してみよう
実際にコードを書くときは、このように使い分けてみてください。
このレシピのコツは、絶対に焦がさないことです。
【重要】火から下ろすタイミングを見逃さないでください。
つまずきやすいポイント：見た目だけで選ばない！
よくある間違いとして、「文字を斜めにしたいから `` を使う」「太くしたいから `` を使う」というパターンがあります。
もし「単にデザインとして文字を太くしたいだけ」なら、HTMLタグではなくCSSの `font-weight: bold;` を使うのが正解です。HTMLはあくまで「意味の担当」、CSSは「見た目の担当」と割り切ると、コードが驚くほどスッキリしますよ。
—
まとめ：あなたのHTMLは「誰かへの手紙」
Webサイトを作ることは、画面の向こう側にいる誰かへ手紙を書くことに似ています。
- 「ここは気持ちを込めて読んでほしいな」と思ったら ``
- 「ここだけは絶対に覚えて帰ってほしいな」と思ったら ``
そんなふうに、「相手にどう伝わってほしいか」を想像しながらタグを選ぶだけで、あなたのHTMLはとても温かく、読みやすいものに進化します。
最初は難しく感じるかもしれませんが、大丈夫。まずは「重要なのはどっちかな？」と一呼吸置くことから始めてみてください。その「配慮」こそが、一流のフロントエンドエンジニアへの第一歩ですよ！
また分からないことがあれば、いつでも聞きに来てくださいね。応援しています！
コメント