HTMLタグで文字を太字にする方法について

WordPressなどでHTMLタグを用いて文字を太字にする方法はいくつかあります。しかし、方法が多いがゆえに、それぞれの使い分けなどがよくわからないという人もいるのではないでしょうか。

今回は、HTMLタグで文字を太字にする方法とその使い分けについて紹介いたします。

HTMLタグで文字を太字にする4つの方法

HTMLタグで文字を太字にする方法のうち、主なものは次の4つです。

  • 太字にする部分を<strong></strong>で囲む。
  • 太字にする部分を<b></b>で囲む。
  • 太字にする部分を<span style="font-weight:bold"></span>で囲む。
  • <span class="bold"></span>で囲みcssで.bold { font-weight:bold; }と記載する。

それぞれの方法で太字にした結果が以下のとおりです。

  • <strong></strong>で囲んだ結果
  • <b></b>で囲んだ結果
  • <span style="font-weight:bold"></span>で囲んだ結果
  • <span class="bold"></span>で囲みcssで.bold { font-weight:bold; }と記載した結果

見ていただければわかると思いますが、これらの方法で太字にした結果は見た目には違いがありません。

では、どのように使い分ければよいかというと、大まかに以下のようになります。

  • <strong></strong>は強調するために太字にするときに使う。
  • <b></b>は基本的に使わない。
  • <span style="font-weight:bold"></span>は強調以外の理由で太字にして、太字にする箇所が少ないときに使う。
  • <span class="bold"></span>で囲みcssで.bold { font-weight:bold; }と記載するのは、強調以外の理由で太字にして、太字にする箇所が多いときに使う。

しかし、ほとんどの場合太字にするのは強調するためだと思います。そのため、慣れないうちは<strong></strong>を使う、と覚えておけばいいと思います。

ちなみに、基本的に使わないと述べた<b></b>ですが、他に適切なタグが無い時に最後の手段で使うべきとのことですので、普段は気にしなくてよいでしょう。

また、Google検索エンジンから見ると、<strong></strong>と<b></b>の違いはないようです。そのことからも、<b></b>を使う意味合いは薄い、と考えてよいでしょう。

ただし、いずれの方法にしろ、太字は用いすぎず、使用は最低限にとどめておくのが肝心です。何故なら太字を乱用しすぎると、どれが重要なのかがかえって分かりにくくなり、太字にしたのが逆効果になってしまうことがあるからです。

まとめ

以上、HTMLタグで文字を太字にする方法とその使い分けについてご紹介させていただきました。

見た目は同じでも、目的によってタグを使い分けなければならない場面はこれ以外にも多く存在します。タグを使うときは、見た目がどのように変化するかだけでなく、どのようなときに用いるべきかにも注意してください。





おすすめの記事