HTML

The HTML <strong> element marks text as strongly important (semantic emphasis), not just bold styling, so you should use it for meaning and rely on CSS for appearance.

strong

<strong> は、その部分が文脈上「特に重要（strong importance）」であることを示す要素です。見た目が太字になりやすいのは既定スタイルであり、目的は「意味を付ける」ことです。

このページでできるようになること

まずは直感：<strong> って何？

ざっくり言うと <strong> は「ここは読む人にとって重要」というマークです。太字で見えることがありますが、太字にしたいから strong ではありません。

正確な定義（仕様に沿った説明）

何のために存在するか

<strong> は、文章の中で強い重要性を持つ部分を示すための要素です（“注意・警告・必須・結論”など）。

何に使えるか（対象）

<strong> は文章の一部（phrasing content）に使うのが基本です。段落、リスト項目、リンクのテキストなど「文中」の重要箇所を表すのに向きます。

できること / できないこと（制約）

できること
  • 重要な語句や条件を明示する（注意事項・必須条件・締切など）
  • 見た目はCSSで自由に調整できる（太字でなくてもよい）
  • 入れ子（ネスト）で重要度の段階を表せるが、多用すると逆効果
できないこと
  • 太字にするためだけに使う（意味が壊れる）
  • ページ全体や長文を丸ごと「重要」にする（情報設計として破綻しやすい）

最短の書き方（よく使う型）

<p>注文は<strong>本日23:59まで</strong>受け付けます。</p>

「何が重要か」が一目で分かるように、強調する範囲は必要最小限にします（1語〜1フレーズが基本）。

デモ：太字を外しても “重要” は残る

この商品は返品不可です。購入前に条件を確認してください。

単なる装飾なら <b>（太字に見えることが多い） で、意味として重要なら <strong>（重要） を選びます。

ポイント：見た目はCSSで変えられるので、「太字＝strong」と決めつけない。

HTML

<p>この商品は<strong>返品不可</strong>です。</p>

CSS

strong { font-weight: normal; } /* “重要”の意味は消えない */

よくある勘違い・混同ポイント

太字にしたいから <strong>
違います。太字はCSSで作れます。<strong> は「重要性」を付けたいときに使います。
<strong> と <em> は同じ

似て見えますが、意味が違います。

  • <strong> → 重要性（落とすと困る情報）
  • <em> → 語気・ニュアンス（言い方の強調、対比）
ページ内の強調は全部 <strong> で統一する
「全部重要」になると、結局どこが重要か分からなくなります。重要な箇所だけに絞り、装飾はクラス＋CSSへ分離します。
見出しを強くしたいので <h2><strong>...</strong></h2>
見出しは見出し要素自体が強い意味（構造）を持ちます。さらに強調したい場合も、まずはCSSで調整し、意味として「特に重要」を付けたい場面だけに絞ります。

実務での使いどころ（判断の目安）

注意事項・条件・期限

返品条件、年齢制限、締切など「見落とすとトラブルになる情報」は <strong> の対象です。

リンク・ボタンの文言で “何が起きるか” を明確にする

「削除」「送信」など危険度が高い動作は、文言自体を明確にし、必要なら一部を <strong> で目立たせます（ただし乱用しない）。

関連要素との相互作用（使い分けの早見）

<em>
語気・対比・ニュアンスの強調。文の意味は変えず、読み方のアクセントを変えたいとき。
<b>
周囲と区別したいが、重要性ではないとき（キーワード、製品名、注目語など）。見た目はCSSで調整。
<mark>
検索語のハイライトなど「ユーザーの文脈で目立たせる」用途。重要性とは別。
<span> + クラス
純粋な装飾やUI都合（色、太さ、アイコン付けなど）。意味を追加しないので、装飾はまずこれで解決する。

試験（HTML5プロフェッショナル レベル1）でのひっかけ整理

用語

ひっかけポイント

ミニ確認

Q1. 「太字にしたい」だけならどれが第一候補？ A. <span> + CSS（または用途によって <b>）。<strong> は重要性を付けたいときです。
Q2. <strong> と <em> の違いは？ A. <strong> は重要性、<em> は語気（読み方の強調）です。

よくある質問（FAQ）

<strong> はSEOに効きますか？
強調テキストだけで評価が上がる設計にはしません。検索向けには、見出し構造（<h1>〜<h6>）や本文の内容、リンク設計が主です。<strong> は「ユーザーに重要と伝える」ために使います。
<strong> を入れ子にしても良い？
仕様上は可能ですが、実務では多用しないのが安全です。段階が必要なら、文章を分ける・箇条書きにする等、情報設計で解決する方が読みやすくなります。
<b> とどっちを使えばいい？
「重要性を示したい」なら <strong>、「重要ではないが目立たせたい/区別したい」なら <b> か <span> + CSS を選びます。
リンクの中で <strong> を使って良い？
使えます。リンク文言の中で「何が重要か」を示したいときに有効です。ただし、リンク全体が装飾で読みにくくならない範囲に絞ります。

よくあるエラー／症状 早見表

症状：ページが “太字だらけ” で読みにくい
原因候補：重要度の設計がなく <strong> を乱用。対策：重要語を1つに絞る/箇条書き化/装飾はCSSへ分離。
症状：強調したのに伝わらない
原因候補：文章が長い/重要語が後ろにある。対策：結論を先に書き、条件や例外は短く分ける。
症状：デザイン変更で強調が消えた
原因候補：strong { font-weight: normal; } のように見た目を変えている。対策：重要性は意味として残るので、UIとして目立たせたいならクラスで追加装飾（例：.is-important）を検討。

まとめ：迷ったときの判断軸（短いチェックリスト）