HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<b>
ボールド(Bold)要素。**意味的な重要性を持たずに**、テキストを太字で表示するために使用されます。
info
概要
<b> 要素は、特定のテキストの範囲を**太字**で表示するために使用されます。ただし、これは**純粋に表現上の強調**であり、セマンティック(意味的)な重要性(強調、重要性、注意など)を付与するものではありません。
もしテキストに**重要性**を持たせたい場合は、代わりに <strong> 要素を使用することが推奨されます。
play_circle
デモ (静的表示)
HTML (Source)
<p>
この文章の一部を
<b>太字で表示しています</b>。
</p>
<br>
<p>
<strong>重要</strong>な情報と、
<b>単なる太字</b>の比較。
</p>
Preview (Result)
この文章の一部を 太字で表示しています。
重要な情報と、 単なる太字の比較。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全てのHTML要素で使用可能なグローバル属性(class, id, styleなど)のみをサポートします。 |
code
実用例
1. 文章中のキーワードを太字にする(意味的な重要性なし)
<p>
最新の調査によると、最も人気のある色は
<b>青</b>であることがわかりました。
</p>
2. 記事のリード文やレビューのタイトルなど、スタイルの目的での太字
<p>
<b>レビュータイトル:期待以上の性能!</b>
この製品は...
</p>
3. strong要素とb要素の使い分け
<p>
<strong>重要:</strong>
期限は明日までです。<b>書類を忘れずに提出してください。</b>
</p>
lightbulb
知っておくべき重要事項
info
<b> と <strong> の違い
どちらも**視覚的には**テキストを太字にしますが、セマンティクス(意味)が異なります。
*
可能な限りセマンティクスを意識し、強調したい場合は
どちらも**視覚的には**テキストを太字にしますが、セマンティクス(意味)が異なります。
*
<strong>: **重要性**を示す(スクリーンリーダーが強調して読み上げる)。
* <b>: **単なるスタイルの変更**(スクリーンリーダーは強調せず、標準的に読み上げる)。可能な限りセマンティクスを意識し、強調したい場合は
<strong> を、単に太字にしたい場合は <b> を使用しましょう。
accessibility_new
CSSでの太字化
見た目だけの太字化であれば、**CSSの
見た目だけの太字化であれば、**CSSの
font-weight: bold; を使用することが最も推奨されます**。これにより、HTMLをセマンティクスに集中させることができます。<b> 要素は、HTMLのセマンティクスを損なわずに太字表示したい場合にのみ使用します。