HTMLのstrongタグとbタグの違いとは？正しい使い分けを徹底解説

太字（ボールド体）は、タイポグラフィにおいて強い強調を表す表現手段とされています。現代のHTMLでは、テキストに太字のフォントウェイトを適用する要素が2つ存在します。それが<strong>タグと<b>タグです。

それぞれ次のように使用します。

<p>strongタグは、テキストを<strong>強調</strong>するために使われます。</p>

<p>bタグは、テキストを<b>強調</b>するために使われます。</p>

HTML5において、<strong>と<b>はどちらもセマンティック（意味的）かつ有効な要素と認められています。最新のブラウザでは両方とも同じ太字スタイルで表示されますが、その意味や目的はまったく異なるのです。

では、strongとbの具体的な違いは何なのでしょうか？　そして、それぞれどんな場面で使うべきなのでしょうか？

• <strong>要素：重要な内容（警告文など）を示すために使用します。
• <b>要素：重要性を示唆することなく、単に注意を引くために使用します。

<b>タグの使用例

スペイン語の単語 <b>idioma</b> は「言語」を意味します。ギリシャ語に由来しています。

上記の例では、「idioma」という単語をハイライトしているのは、それが特に重要だからではなく、周囲のテキストの中で目立たせたい英語以外の外国語の単語だからです。意味を伝えるために必須の処理というよりは、スタイル上の判断と言えます。

つまり、特定のセマンティックな意味を持たせずに、単に注目を引きたい場合は、<b>を使うのが歴史的には正しい使い方でした（HTML5以前の話）。ただし現代では、見た目の制御はHTMLではなくCSSで行うのが主流です。そのため筆者自身は<b>タグを使っていません。

<strong>タグの使用例

2020年において、<strong>セキュリティ</strong>と<strong>パフォーマンス</strong>は
SEOにとって極めて重要です。

上記の例では、「セキュリティ」と「パフォーマンス」を強く強調しています。これらのトピックは、ウェブサイトのSEO（およびUX）にとって実際に非常に重要だからです。

見た目が同じだと混乱のもと——CSSで区別しよう

デフォルトでは、<strong>と<b>はほとんどのブラウザで同じ太字スタイルが適用されるため、多くの開発者を混乱させています。用途が異なるツールなのに、なぜ同じ見た目にしてしまうのでしょうか？

筆者も同じ意見です。確かに厄介な仕様ですね。

そこでおすすめしたいのが、ブラウザのデフォルト設定を上書きして、それぞれに異なるスタイルを適用する方法です。

<strong>と<b>を見た目で区別する良い方法は、CSSで<strong>要素に500〜900の範囲でfont-weightを指定することです（フォントファミリーによって最適値は異なります）。例えば次のように記述します。

strong {
  font-weight: 700;
}

さらに、<b>には別のスタイルを適用します。例えば：

b {
  font-weight: 400;
  color: green;
}

これは推奨スタイルというわけではなく、ブラウザでレンダリングされたページを見たときに「どちらのタグを使ったのか」をひと目で判別できるようにするための一例です。

Markdownを使っている場合の扱い

BrowserlingなどのHTML→Markdown変換ツールで<b>や<strong>を変換してみると、どちらも同じ** **（アスタリスク2個）に変換され、ブラウザでは<strong>としてレンダリングされることに気づくでしょう。

では、これはどういうことなのでしょうか？

正直なところ、筆者にも確信は持てません。Markdownの構文のみで<b>をブラウザに表示させる方法を紹介している公式ガイドは見つけられなかったのです。

しかし心配はいりません。古いバージョンを使っていない限り、Markdownファイル内に直接HTML構文を記述することができます。<strong>の代わりに<b>を使いたい・使う必要がある場合は、次のように書くだけでOKです。

Here is a line of text inside a <b>markdown</b> file which automatically gets wrapped by paragraph tags

実はこのチュートリアル自体もMarkdownで書かれています。先ほどの段落の一部は<b>要素でハイライトされています。該当箇所を選択して右クリックから「検証（Inspect）」を実行すると、実際に<b>要素が使われていることを確認できます。

どちらを使うかは本当に重要なのか？

生死に関わる問題かといえば、そうではありません。重要な問題であれば、モダンブラウザは<b>と<strong>を同じ太字スタイルでレンダリングしたりしないはずだからです。

しかし、セマンティクスの観点では明確な違いがあります。これこそが本記事でお伝えしたかった核心です。もし就職面接など、セマンティックマークアップを非常に重視する場面に遭遇したら、この違いをしっかり理解しておくことが大きな武器になります。

まとめ

• <b>：特定のテキストに注意を引くために使用する
• <strong>：重要なテキストであることを示すために使用する
• 迷ったら<strong>を使う

良い経験則として、強調の乱用は避けましょう。強調しすぎると、強調そのものの効果が薄れてしまいます。すべてを強調すれば、何も強調していないのと同じことです（ありきたりなマーケティング系ランディングページのサイト諸君、聞いているかい？）。