Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<strong> / <em>

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

構文

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

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

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

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

サンプルコード

<!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』は見た目が同じ太字ですが、意味が異なります。

このファイルを削除すると「元に戻せません」。  ← 太字で警告
「今日中に」提出してください。               ← 斜体で強調
「HTML」と「CSS」はWebの基本技術です。       ← 太字（装飾）
彼は cogito ergo sum という言葉を残した。    ← 斜体（ラテン語）
パスワードは「絶対に他人に教えない」でください。 ← 太字+斜体

概要

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

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

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