strongとbとboldの違いわかりますか?
これらはいずれも「文字を太字にするため」に使われますが、それぞれ意味や使い方に違いがあります。
クラス名やCSSを使わずに簡単に文字を太字にするために <strong>
タグを使うケースを見かけますが、本来 <strong>
は意味的な強調を示すためのタグです。そのため、見た目だけを太字にしたい場合には適切ではありません。
strongは
見た目を太字にするだけでなく、その意味を強調する場合に使うタグです。SEOに影響を及ぼす可能性がありますので、
強調した部分に使います。乱用するとSEOでペナルティ対象になる可能性があります。
詳しく見ていきましょう。
font-weight: bold
CSSを使ってフォントを太文字にする
CSSのプロパティ font-weight を使用。
見た目を制御するだけで、特別な意味を持たない。
<p>太文字にする</p>
p{ font-weight:bold; }
normal (標準の太さ、デフォルトは 400 に相当)
bold (太字、700 に相当)
lighter (親要素よりも細いフォント)
bolder (親要素よりも太いフォント)
フォントの太さを数値で指定
100 ~ 900 の範囲で指定可能。
数字が大きいほどフォントが太くなります
日本語フォントの制限
日本語フォントでは、フォントデザインの制約により細かい太さ(100~900)の指定が反映されないことが多いです。
太さが「normal」か「bold」の2種類しかないフォントが一般的です。
そのため、とくにこだわりがなければ bold を使用するのが簡単で確実です。
より多くの太さが必要な場合
高品質なフォントファミリー(例:Google Fontsの多ウェイトフォント)を使用すると、細かい太さの調整が可能になります。
normal や bold 以外に数値指定も可能。
日本語フォントの制約を理解し、必要に応じて bold を使うのが現実的。
<strong>
HTMLの意味論に基づいて「重要性」を示す要素。
「この部分を強調したい」「重要な内容として伝えたい」といった文脈がある場合に適しています。
ブラウザのデフォルトスタイルでは太字として表示されますが、CSSでスタイルを変更できます。
特徴
文字が 重要 であることを伝える目的。
視覚的な強調に加えて、スクリーンリーダーでは「重要な部分」として読み上げられる。
SEOにも影響を与える可能性がある。
太文字にしたいがために<strong>の乱用はさけましょう。重要な箇所のみ使用。
「見出し(<h1>~<h6>)」に使うのはNGです。見出しは既に重要性がある要素で、意味が重複してしまいます。
例:
<p><strong>これは重要な太字です</strong></p>
<b>
HTMLで「太字」にするためでSEO的に強調の意味は持たない。
特徴
見た目だけを変えるためのタグ。
現在では、strong や CSSの font-weight を使用するのが推奨される。
例:
<p><b>これは太字です(見た目だけ)</b></p>
違いを比較
結論
意味を伝える場合: <strong> を使用。
単に見た目を太字にする場合: font-weight: bold; を使用。
現在は<b>ではなくて strong かCSSを使う方が適切です。
SEOやアクセシビリティを意識して、タグの適切な使い分けを心掛けましょう!