こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。
HTMLを学び始めると、必ずと言っていいほど「あれ？ `` タグと `` タグって何が違うの？」「どっちを使えばいいの？」という疑問にぶつかりますよね。実はこれ、Webの歴史を知ると「なるほど！」と腑に落ちる面白いストーリーがあるんです。
今回は、かつて「ただの装飾道具」だったタグたちが、なぜ今の「意味を伝える道具」へと生まれ変わったのか、その秘密を紐解いていきましょう。
—
昔と今の「HTML」は何が違うのか？
HTMLの黎明期、Webサイトは今よりもずっと質素でした。当時の開発者たちは「文字を太くしたい！」「斜体にしたい！」という願いを叶えるために、HTMLを「見た目を決める道具」として使っていたんです。
例えば、こんな感じです。
- `` (bold) = 太字にする
- `` (italic) = 斜体にする
- `` (underline) = 下線を引く
しかし、これには大きな問題がありました。
もし、Webサイトのデザインを後から一気に変えたくなったとき、HTMLファイルの中に「太くする命令」が散らばっていると、全部書き直すのが大変ですよね。
そこで登場したのがCSS（スタイルシート）です。
「見た目はCSSに任せて、HTMLは『ここには何が書かれているか（意味）』を伝えることに集中しよう！」というルールに変わっていったのです。これが、現代のWeb開発の基本思想です。
—
「見た目」から「意味」へ。タグの変遷
では、かつての装飾タグたちはどうなったのでしょうか？ 実は、廃止されたわけではありません。「意味」を持たせて再定義されたのです。
1. `` と `` の違い
- 昔： どちらも「太字にするタグ」でした。
- 今：
- ``：「注意を引くための太字」。文章の中で「ここだけちょっと注目してほしいな」というキーワードに使います（特別な強調ではない）。
- ``：「強い重要性」。その文章の中で「絶対に読んでほしい！」「ここが核心だ！」という箇所に使います。
2. `` と `` の違い
- 昔： どちらも「斜体にするタグ」でした。
- 今：
- ``：「声のトーンが変わる部分」。例えば、外国語の単語や、心の中の独り言、専門用語など、「周りの文章とは少し雰囲気が違うもの」に使います。
- ``：「強調（emphasis）」。読んでいる人が「ここを強く読み上げてほしいな」と思うような箇所に使います。
3. `` と ``
- ``（アンダーライン）は、「誤字ではないけど、他と区別したい部分（固有名詞など）」として復活。
- `
`（ストライク）は、「かつては正しかったけれど、今は違う情報（価格変更など）」として、「取り消し線」の意味を持つようになりました。
—
現代的な書き方：CSSで「見た目」をコントロールしよう
これらを踏まえて、現代のフロントエンド開発ではどのように実装するのか、サンプルを見てみましょう。
今の価格は 1,000円 500円 です！
※ AI による特別セール中。
—
初学者の皆さんへ：迷ったときの考え方
「結局、どれを使えばいいの？」と迷ったら、こう考えてみてください。
「もしCSS（デザイン）が全部消えて、文字だけの文章になったとき、この箇所はどんな意味を持っていてほしいかな？」
- 「ここは特に重要だから、文字だけでも強調されていてほしい」→ ``
- 「ここは単に名前だから、特別な意味はないけど区別したい」→ ``
このように、「見た目」ではなく「役割」で選ぶことが、検索エンジンにも優しく、アクセシビリティ（誰にとっても使いやすいWeb）の観点からも素晴らしいコードへの第一歩です。
最初は難しく感じるかもしれませんが、少しずつ使い分けていくうちに自然と手が動くようになりますよ。焦らず、楽しみながらコーディングしていきましょう！
何か分からないことがあれば、いつでも聞きに来てくださいね。一緒に成長していきましょう！
コメント