HTMLのstrongタグの使い方まとめ！bタグとの違いは？

HTMLでテキストを強調する際に使用するstrongタグについて書いています。
この記事では、strongタグの使い方と、類似のbタグとの違いについて解説します。

strongタグとは

strongタグは、テキストの重要性や強調を表すために使用されます。
strongタグで囲まれたテキストは、通常、ブラウザによって太字で表示されます。

strongタグの例

<p><strong>このテキストは強調されています。</strong></p>

上記の例では、「このテキストは強調されています。」というテキストがstrongタグで囲まれているため、太字で表示されます。
実際にブラウザで確認すると、下記のようになります。

strongタグは、グローバル属性をサポートします。
グローバル属性とは、HTMLの多くの要素で使用できる共通の属性のことです。

これらの属性をCSSやJavaScriptと組み合わせることで、strongタグで囲まれたテキストのスタイルや振る舞いを制御できます。

class属性を使った例です。
CSSでスタイルを指定するために使用します。

<p><strong class="error">エラー：</strong> 必須項目が入力されていません。</p>

.error {
  color: red;
  font-weight: bold; /* デフォルトで太字ですが、明示的に指定 */
}

上記の例では、class属性にerrorというクラス名を指定しています。
CSSでは、.errorというセレクタを使って、文字色を赤色、太字にしています。

実際にブラウザで確認すると、下記のようになります。

style属性を使った例です。
HTML内で直接スタイルを指定します。

<p><strong style="color: orange;">注意：</strong><span>設定を変更する前に必ずバックアップを取ってください。</span></p>

上記の例では、strongタグのstyle属性で、文字色をオレンジ色に指定しています。
実際にブラウザで確認すると、下記のようになります。

strongタグのデフォルトのスタイル（太字）は、CSSで上書きしたり、さらに他のスタイルを追加したりすることができます。

strong {
  font-weight: 900; /* より強い太字 */
  color: navy;
}

<p><strong>重要なポイント：</strong> これは強調されたテキストです。</p>

上記の例では、strong タグで囲まれたテキストが、より強い太字で紺色に表示されます。
font-weight: 900;は、太さの度合いを数値で指定するプロパティです。

実際にブラウザで確認すると、下記のようになります。

bタグもテキストを太字で表示するために使用されますが、strongタグとは意味合いが異なります。

bタグの例

<p><b>このテキストは太字で表示されます。</b></p>

上記の例では、「このテキストは太字で表示されます。」というテキストがbタグで囲まれているため、太字で表示されます。
実際にブラウザで確認すると、下記のようになります。

HTML5における推奨:

HTML5の仕様では、意味合いを持つテキストには <strong> を、単に視覚的に太字にしたい場合にはCSSを使用することが推奨されています。
b タグは、意味合いを持たない太字表現が必要な場合に限定的に使用されます。

strongタグ:
- 警告文: 「**注意:** 〇〇しないでください」
- 重要なキーワード: 「このドキュメントの**最も重要な**ポイントは〜」
- アクションの指示: 「**今すぐ登録**して特典をゲット！」
bタグ:
- 記事の見出し: (意味合いの強調というよりはデザインとしての太字)
- 特定のキーワード: (文脈上の重要性は低いが、デザインとして目立たせたい場合)

strongタグとbタグはどちらもテキストを太字で表示しますが、意味合いが異なります。

テキストの重要性や強調を表す場合はstrongタグを使用し、単に見た目を太字にするだけであればbタグを使用します。
適切に使い分けることで、WebページのアクセシビリティとSEOを向上させることができます。