HTML

この記事では、文章の意味を強めずに、キーワードやラベルなどへ目を向けてもらうHTMLの<b>要素と、strong・em・CSSとの使い分けを初心者向けに説明します。

The HTML <b> element is for drawing attention to specific words as visual “markers” without changing the meaning (importance), with practical guidance on when to choose <strong>, <em>, or CSS instead.

b要素

b は、文章の意味（重要さ）を強くするのではなく、「そこに目を向けてほしい」文字を、読みやすい“目印”として目立たせるための要素です。見た目は太字になることが多いですが、目的は「太字にすること」そのものではなく、読み手が流し読みしても見つけやすくするための 視線誘導 に近い感覚です。

たとえば、同じページ内で何度も出てくる用語、UIのラベル、手順の中の“見落としやすい単語”などを、意味は変えずに目立たせたいときに向いています。

Table Of Contents

b要素の主な役割（まずはここだけ）

意味（重要度）を上げずに、視線だけを集める: b は「重要だから強く言いたい」という意味付けではなく、「ここを目印として見つけやすくしたい」という目的で使います。読み手の“目”に対するヒントを置くイメージです。
文章の流れの中で使える（インライン要素）: b は文の途中に入れられる要素です。段落やリストの中で、特定の単語だけを目立たせるのが得意です。
「太字にしたい」だけならCSSが本命: 単に見た目を太くしたいだけなら font-weight を使う方が安全です。b は“目印にしたい”という意図があるときに使うのが筋がいいです。

strong / em / CSS との使い分け（迷ったらこのルール）

ここが一番つまずきやすいポイントです。見た目が似ていても、目的（意味）が違います。

strong：意味として「重要」「重大」「強い注意」を出したい: 「これは大事」「ここは危険」「ここは絶対」など、内容の重要度を上げたいときは strong が合います。
em：読みのアクセント（強調）を付けたい: 会話文や説明文で「ここを強めて読んでほしい」というニュアンスなら em が向いています。
b：意味は変えずに“目印”として目立たせたい: 重要とは限らないけれど、用語やラベルとして見つけやすくしたいときに b が便利です。
CSS：装飾だけ（意味を足さない）: 見た目の都合で太字にしたいだけなら、span にクラスを付けて font-weight を指定するのが基本です。

覚え方：strong/em は「意味」、b は「目印」、CSS は「装飾」。

よくある誤解：b要素＝太字にするタグ？

たしかに多くのブラウザで b は太字っぽく表示されます。ただし、それは「たまたま多くの環境でそう見える」というだけで、b の役割は 太字化そのもの ではありません。

「太字にしたい」だけなら CSS（font-weight）。
「重要」を伝えたいなら strong。
「読みのアクセント」を付けたいなら em。
「意味は変えず、目印として目立たせたい」なら b。

b要素が向いている場面（実務で使える具体例）

例1：同じページで繰り返し出てくる用語を“目印”にする

専門用語や略語は、初めて読む人が途中で迷子になりやすいです。最初の登場や、区切りになる場所で b を使うと、流し読みでも“そこが用語だ”と分かりやすくなります。

HTML

<p>
    このページでは <b>キャッシュ</b> と <b>セッション</b> を混同しないためのコツをまとめます。
</p>

例2：UIのラベルや区切り語を見つけやすくする

フォームや手順の文章では「必須」「任意」などが一瞬で目に入ると、読み手のストレスが減ります。重要度として強く言いたいわけではなく、目印として置きたいときに b が便利です。

HTML

<ul>
    <li><b>必須</b>：メールアドレス</li>
    <li><b>任意</b>：電話番号</li>
</ul>

例3：段落の冒頭に“要点ラベル”を置く

本文が長くなるページでは、段落の冒頭に「結論」「注意」「補足」などのラベルがあると読みやすくなります。意味として重要（強い注意）なら strong も候補ですが、「読みやすさのための目印」なら b の発想が合います。

HTML

<p>
    <b>結論</b>：太字にしたいだけならCSS、意味を付けたいなら strong/em を優先。
</p>

避けたい使い方（事故りやすいパターン）

見出しの代わりに b要素を使う: 見出しの役割は h1〜h6 にあります。見出しっぽい文字を b で作ると、ページ構造としては見出しにならず、目次生成や読み上げの理解がズレやすくなります。
「重要」「警告」を表したいのに b要素で済ませる: 重要性を表すなら strong が候補です。b は“目印”なので、意図が弱く伝わる可能性があります。
ただの装飾として乱用する: b を多用すると、どこが本当に要点なのか分からなくなります。「キーワードの目印」など用途を絞ると、逆に読みやすさが上がります。

アクセシビリティの考え方（中級者以上の方向け）

HTMLは「見た目」だけでなく「意味」を持たせることで、スクリーンリーダーなどの支援技術にも情報が届きやすくなります。

b要素は「重要だ」と伝える要素ではない: b は“目印”としての視覚表現に寄っています。重要性や強い注意の意味まで伝えたいなら strong を検討する方が自然です。
要素選びで意味が決まる（CSSでは意味付けできない）: CSSで太字にしても「重要」の意味は付きません。意味を伝えたいなら、まずHTML要素を選び、見た目はCSSで整えるのが王道です。
ARIAで無理に“意味の上書き”をしない: 「この b は重要だから…」という理由でARIAを盛るより、最初から strong を使う方が保守もしやすく、読み手にも伝わりやすいです。

実務の判断フロー（迷いをゼロにする手順）

それは「重要」「強い注意」を伝えたい？ → strong
それは「読みのアクセント」を付けたい？ → em
それは「意味は変えずに、目印として見つけやすくしたい？」 → b
それでも「見た目だけ」の話？ → span + CSS（font-weight など）

ポイント：“太字にしたい”から始めると迷います。「何を伝えたいか（意味か／目印か／装飾か）」から決めるとスパッと決まります。

Sample

このサンプルでは、同じ文章の中で「重要」なのか「目印」なのかを分けて書きます。見た目が似ていても、意図（意味）が違うことが分かるようにしています。

パスワードは 絶対に 使い回さないでください。ここで使う用語は トークン です（以降この呼び方で統一します）。

HTML

<p>
    パスワードは <strong>絶対に</strong> 使い回さないでください。
    ここで使う用語は <b>トークン</b> です（以降この呼び方で統一します）。
</p>

「絶対に」は意味として強い注意なので strong。「トークン」は目印として見つけやすくしたいので b、という分け方です。

よくある質問（FAQ）

とにかく太字にしたいだけなら、b を使っていいですか？: 見た目だけなら CSS の font-weight が基本です。b は「目印として注目させたい」という意図があるときに使うのが向いています。
b と strong は何が違いますか？: strong は意味として「重要」。b は意味を強くせず「目を向けてほしい目印」という違いです。
b を多用すると何がまずいですか？: どこが本当に要点なのか分かりにくくなります。キーワードの目印など用途を絞ると読みやすくなります。
アクセシビリティ的にはどう考えればいいですか？: 重要性や強い注意の意味を伝えたいなら strong、読みのアクセントなら em を優先し、b はあくまで“視覚的な目印”として使うと安全です。
b にARIAを足して「重要」を表した方がいいですか？: 基本はおすすめしません。最初から意図に合う要素（strong など）を選ぶ方が自然で、保守もしやすいです。

よくあるエラー・誤用早見表

「太字＝重要」だと思って全部 b にした: 重要の意味なら strong、見た目だけなら CSS（font-weight）を優先します。
見出しの代わりに b を使った: 構造は h1〜h6。見た目はCSSで調整します。
b を付けすぎて文章がうるさくなった: 「キーワードの目印」など用途を絞って減らすと読みやすくなります。
強調のつもりで b を使った: 強調（読みのアクセント）なら em、重要なら strong を検討します。