HTML em・strongタグ：強調・重要性とb・CSSの違い

HTML の <em> は文中で語句の強調を示し、<strong> は強い重要性、重大性、または緊急性を示します。ブラウザは通常、それぞれを斜体および太字として表示しますが、デフォルトの見た目ではなく文脈での意味に基づいて要素を選択します。

em と strong はどのように異なるのか？

emは、どの語句に力を込めるかで文の焦点が変わる場合に使います。「私が今日、文書を確認しました」で「私が」を強調すると確認した人に、「今日」を強調すると確認した時点に焦点が当たります。strongは、読者が知る必要のある注意事項や重要な結論など、内容自体の重要性を表します。

両方の要素は文の中で機能します。見た目だけで段落全体を大きな見出しのように包まないでください。文書の見出しはh1からh6で構造化し、必要な箇所にのみ意味のある強調を適用してください。

完全な例で焦点の違いを比較してください

このドキュメントをemphasis.htmlとして保存し、ブラウザで開きます。最初の二つの文の強調、重要な指示、そして視覚的な太字スタイルだけを使った最後の文を比較してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>強調と重要性</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>文脈による強調</h1>
  <p><em>私が</em>今日、文書を確認しました。</p><p>私が<em>今日</em>、文書を確認しました。</p><p><strong>ファイルを置き換える前にバックアップを確認してください。</strong></p><p>この文書の用語：<b>要素</b>と<b>属性</b></p><p>見た目の例：<span class="visual-bold">この部分はCSSで太字にしています。</span></p></body>
</html>

一般的なデフォルトスタイルでは、「私が」と「今日」は斜体で表示され、バックアップの指示やbでマークされた用語は太字で表示されます。spanもCSSによって太字になりますが、重要な意味を表す要素にはなりません。フォントやユーザースタイルによって見た目は変わる可能性があるため、重要な意味は言葉でも明確に表現してください。

bとCSSの太字スタイルを区別する

b を単に「意味のないstrong」と考えるだけでは、その目的を見逃します: 注意を引くためのものです。見た目だけが目的の場合は CSS を使用してください。同様に、単に斜体のテキストが欲しいからといって em を選んではいけません。

CSSを使用してemの斜体を削除したり、strongのウェイトを変更したりしても、HTMLで表現される意味は保持されます。逆に、spanを太字にしてもstrongの意味が与えられるわけではありません。支援技術による実際のアナウンスは環境によって異なるため、特定の音声変更が常に発生するとは限りません。要素の定義については、MDN em リファレンス、MDN strong リファレンス、及びMDN b リファレンスを参照してください。