/

対応:		HTML 4（1997）

『strong』はテキストの重要性を示す要素（デフォルトで太字）、『em』はテキストに強調のニュアンスを与える要素（デフォルトで斜体）で、どちらも意味を持った要素です。

構文

<!-- 重要性・深刻さを示す -->
<strong>重要なテキスト</strong>

<!-- 強調・アクセントを示す -->
<em>強調したいテキスト</em>

タグ一覧（b, i との違い）

タグ	概要
strong	テキストの重要性・深刻さ・緊急性を示します。スクリーンリーダーでは強い読み方をするものがあります。デフォルト表示は太字です。
em	テキストに強調のアクセントを付けます。入れ子にするほど強調度が増します。デフォルト表示は斜体です。
b	意味的な重要性はなく、見た目を太字にするだけの要素です。キーワードや製品名など「注目させたい」テキストに使います。
i	意味的な強調はなく、見た目を斜体にするだけの要素です。専門用語・外来語・考えやタイトルなどに使います。

サンプルコード

sample_strong_em.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- strongで重要な部分を示す -->
  <p>このファイルを削除すると<strong>元に戻せません</strong>。必ずバックアップを取ってください。</p>

  <!-- emで強調・ニュアンスを加える -->
  <p><em>今日中に</em>提出してください。</p>

  <!-- bとiは見た目だけの装飾 -->
  <p><b>HTML</b>と<b>CSS</b>はWebの基本技術です。</p>
  <p>彼は<i>cogito ergo sum</i>（我思う、ゆえに我あり）という言葉を残した。</p>

  <!-- strongとemの組み合わせ -->
  <p>パスワードは<strong><em>絶対に</em>他人に教えない</strong>でください。</p>

</body>
</html>

実行結果

『strong』は太字、『em』は斜体で表示されます。『b』と『strong』は見た目が同じ太字ですが、意味が異なります。

サンプルページはこちら

概要

『strong』と『b』はどちらも太字で表示されますが、意味が根本的に異なります。『strong』は「このテキストは重要だ」という意味を持ち、スクリーンリーダーや検索エンジンに伝わります。一方『b』は「見た目を太字にする」だけで意味はありません。同様に『em』と『i』も、前者が意味的な強調、後者が見た目だけの斜体です。

HTMLのタグは見た目ではなく意味で選ぶことが大切です。重要な警告や必須事項には『strong』、文章内でアクセントを付けたい箇所には『em』を使いましょう。単に太字・斜体のスタイルを適用したいだけであれば、CSSの『font-weight: bold』や『font-style: italic』を使う方が適切な場合もあります。

『strong』と『em』は入れ子にすることができます。『em』を2重に入れ子にすると強調度が増します。また、『strong』の中に『em』を入れることで「重要かつ強調」を表現することもできます。

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

4 以降 ○

3 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

3.2 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

SEOと検索エンジンへの影響

検索エンジンは『』タグで囲まれたテキストを重要なキーワードとして認識し、ページの主題を判断する際に参考にします。ただし、過剰な使用はスパムと判断されるリスクがあります。記事の中で本当に強調したい部分のみに限定して使いましょう。

タグ	SEOへの影響
<strong>	囲まれたテキストを重要キーワードとして認識。適切な使用はSEOにプラス
<em>	一定の強調シグナルを持つが、strongほど強くはない
<b>, <i>	意味的な重要性がないためSEOへの影響は薄い

CSSによるカスタマイズ

『』と『』はデフォルトのスタイル（太字・斜体）をCSSで上書きして、デザインに合わせた表現に変えることができます。

/* strongのデフォルト（太字）を色変更に変える */
strong {
  font-weight: bold;
  color: #cc0000; /* 赤色で強調 */
}

/* emのデフォルト（斜体）をアンダーラインに変える */
em {
  font-style: normal;       /* 斜体を解除 */
  text-decoration: underline;
  text-decoration-color: #4488ff;
}

/* 警告文のstrongを背景色でハイライト */
.warning strong {
  background-color: #fff3cd;
  padding: 0 3px;
  border-radius: 2px;
}

スタイルを変えても要素の意味は変わりません。見た目だけを変えたい場合でも、意味（重要性・強調）に応じてタグを正しく選ぶことが大切です。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典

<strong> / <em>

構文