Web制作の世界へようこそ！HTMLを書き始めたばかりの頃って、「見た目は同じなのに、なんでタグがいくつもあるの？」と不思議に思うことがたくさんありますよね。
特に、今回取り上げる``タグと``タグは、その代表格です。どちらも文字が「太字」になるから、「どっちを使っても同じじゃない？」と思ってしまいがち。でも、実はこの二つ、「Webという舞台での役割」が全く違うんです。
今日は、この「太字のふたご」の本当の正体について、少し深掘りしてみましょう。
—
1. 見た目は同じでも、中身は別物？
まずは、想像してみてください。あなたは今、大きなお買い物サイトを作っているとします。
- ``タグ： 「重要！」というラベルを貼るタグ。
- ``タグ： 「ここ、目立たせたいな」というデザイン用のタグ。
画面上ではどちらも「太字」になります。でも、スクリーンリーダー（視覚障がいのある方がWebサイトを読むために使う読み上げソフト）に聞かせると、その態度はガラリと変わるんです。
`` は「声を大にして伝える」
``は「強い重要性（Strong Importance）」を表します。例えば、「この商品は、今買わないと売り切れます！」という箇所。スクリーンリーダーはここを読み上げる際、少し声を強めたり、強調したりして伝えてくれます。
`` は「とりあえず目立たせる」
一方で``は「装飾目的の太字」です。例えば、商品名やキーワードをちょっとだけ目立たせたい時。スクリーンリーダーはこれを「ただの文字」として読み飛ばします。そこに特別な重要性は含まれていないからです。
—
2. 実践！コードで使い分けを見てみよう
では、実際にどんな風に書き分ければいいのか、コードで見てみましょう。
注意：
このクーポンは本日23時59分までしか使えません！
今回のランキング第1位は、「ふわふわパンケーキミックス」です！
どうでしょう？
上の「注意」は、読み手にとって情報の優先度が高いですよね。だから``。
下の「パンケーキミックス」という商品名は、単に目立たせたいだけなので``。
これくらいの感覚で使い分けるのが、実は正解なんです。難しく考えすぎなくて大丈夫ですよ！
—
3. 「セマンティック（意味論）」って難しくない？
Web制作の界隈ではよく「セマンティックに書こう！」と言われます。これ、初心者の頃は呪文のように聞こえてドキッとしますよね。
でも、難しく考える必要はありません。「コンピューターに、この文章がどういう意味を持っているかを教えてあげること」、それだけでOKです。
- 「ここは大切な場所だよ（Strong）」
- 「ここはただの装飾だよ（Bold）」
このように、タグという「名札」を正しく付けてあげることで、検索エンジンや読み上げソフトが、あなたのWebサイトをより深く理解してくれるようになります。結果として、それがSEO（検索順位の向上）やアクセシビリティ（誰にでも使いやすいサイト作り）につながるんです。
—
まとめ：迷ったらこう考えよう！
最後に、迷った時の判断基準を置いておきますね。
1. 「ここが重要！伝わらないと困る！」と思う場所には ``
2. 「なんとなく目立たせたい」「デザイン的にここを太くしたい」という場所には ``
もし「どっちかな？」と迷ったら、「もしこの文字が細字だったら、意味が伝わりづらくなるかな？」と自分に問いかけてみてください。答えが「Yes」なら``、「No」なら``（あるいはCSSで太字にする）を選べば完璧です！
Webの記述は、読み手への「思いやり」です。こうしてタグの意味を一つひとつ大切にしていくことで、あなたの作るサイトは、誰にとっても「優しくて分かりやすい場所」になっていきますよ。
一歩ずつ、一緒に学んでいきましょうね！
コメント