HTML

A small HTML tag for marking the words in a sentence you really want to stress, so that both people and screen readers can notice your emphasis and feel the nuance, with simple examples of how it differs from the strong and i tags.

em要素

文章の中で「ここを強く伝えたい」「ニュアンスをはっきり感じてほしい」と思う言葉に目印を付けて、読み手やスクリーンリーダーに強調を伝えるための小さなタグの使いどころと、strong要素・i要素との違いがイメージしやすくまとまったページです。

em要素の主な役割

文意における強調（emphasis）を示す
実際のブラウザ上ではデフォルトのスタイルとしてイタリック（斜体）で表示されることが多いですが、あくまでも視覚的な効果というより、「文脈上の強調」であることが重要です。
テキストの強調度を段階的に表現可能
em要素は入れ子（ネスト）にすることができ、ネストの回数によって強調度合いをより高める使い方があります。ただし、現実的にはネストに対してのスタイリングが標準でそれほど明確に変化しないことが多いため、多用は控えられることが多いです。
スクリーンリーダーなどの支援技術で読み上げられる際に強調される
em要素を使っている部分は、支援技術によって「強調されている箇所」として扱われるケースがあります。たとえば、音声のトーンを変えて読み上げるなど、利用者に文脈的な強調を伝えられます。

em要素と似た要素との違い

strong要素との違い

i要素との違い

em要素を使うときの注意点

過度な入れ子は避ける
多層的に強調すべき文章構造は少ないため、入れ子を多用するのは可読性を損ねる可能性があります。本当に複数段階の強調が必要かどうか、文脈を再確認しましょう。
スタイルより文脈の意味を重視する
“文字を斜体にしたい”という目的だけで em要素を使うのは好ましくありません。視覚表現が目的の場合は CSSで font-style: italic; などを指定する方法を検討し、HTML要素にはあくまで「セマンティクス（文脈的意味）」を持たせるようにします。
strong要素との住み分け
強調したい内容が「重要度の高さを伝えるものか」「感情表現や抑揚を意図したものか」を考え、目的に応じて使い分けるのが望ましいです。

Sample

彼はWorld Championshipで初めて優勝を果たしました。

HTML

<p>
	彼は<span lang="en">World Championship</span>で
	<em>初めて</em>優勝を果たしました。
</p>

CSS

em {
	text-decoration: dotted underline;
	text-underline-offset: 4px;
}

この例では「初めて」の部分が強調されるべき内容とみなし、em要素を使っています。スクリーンリーダーでは適切に強調が伝えられるため、見た目だけでなく文脈的にも「重要な初の優勝である」ことを知らせる効果があります。

Sample 2

以下の例文では、同じ文章でも em要素を挿入する位置によって、読み手が感じ取るニュアンスが微妙に変化する様子を示しています。

パターン１

HTML

<p>私は<em>本当に</em>あなたを愛しています。</p>
強調点
「本当に」
ニュアンス
「心から真剣に」愛しているという気持ちを強く表現しており、誠実さや真剣さにフォーカスが当たります。

パターン２

HTML

<p>私は本当に<em>あなたを</em>愛しています。</p>
強調点
「あなたを」
ニュアンス
「あなた」という存在そのものに焦点が置かれており、「愛しているのは他の誰でもなく“あなただ”」という点を強調しています。

パターン３

HTML

<p>私は本当にあなたを<em>愛しています</em>。</p>
強調点
「愛しています」
ニュアンス
「愛する」という行為や気持ちそのものを強くアピールしており、「愛するという感情が非常に深い」という点に重きが置かれます。

解説

位置による強調の対象の違い
em要素をどこに置くかによって、文章全体が伝えようとするポイントが微妙に変わります。パターン1では「本当に」という副詞を強調して誠意を示し、パターン2では「あなた」という対象に強調が移り、パターン3では「愛しています」の行為が強調されます。
セマンティクスの重要性
em要素は単なる文字装飾ではなく、「文脈上の強調」を意味づけするための要素です。視覚的には斜体表示になりがちですが、本来は支援技術（スクリーンリーダーなど）に「ここを重要に読んでほしい」という情報を伝える役割を担っています。
使い分けのポイント
強調すべき要素が「言葉の定義」なのか、「対象」なのか、「感情」なのかを考えて最適な位置に em要素を使うと、読み手により正確なニュアンスを届けられます。文脈によっては strong要素を使った方が「重要度の高さ」を伝えやすい場合もあるため、目的に合わせて使い分けることが大切です。

このように、同じフレーズでもどこを強調するかによって意味合いや伝わり方が変わるため、em要素の使い所を吟味することで文章の意図をより正確に読み手に伝えることができます。

よくある質問（FAQ）

どんなときにem要素を使えばよいですか？
文章の中で「ここを強く言いたい」「ニュアンスをはっきり感じてほしい」と思う部分に使います。声のトーンを少し強めるイメージで、1語〜数語くらいの短いフレーズに付けるのが基本です。
strong要素との違いがよく分かりません。
strongは「重要度の高さ」を示し、emは「言い方の強さ・抑揚」を示すイメージです。マニュアルの注意書きなど客観的に重要な情報はstrong、話し言葉のニュアンスを強く出したいときはemを選ぶと考えると整理しやすくなります。
見た目を斜体にしたいだけのときにemを使ってもいいですか？
見た目のデザインだけが目的ならemは使わず、CSSでfont-style: italic;などを指定する方がよいです。emは見た目ではなく、「ここが文脈上の強調です」という意味を付けるための要素です。
文章全体や段落全体をemで囲んでもいいですか？
技術的には可能ですが、読み手にとって「どこが特に強調なのか」が分かりにくくなります。基本的には1つの文の中の一部分だけに使い、どうしても段落全体を強調したいときはCSSで背景色や枠線を付けるなど別の方法を検討しましょう。

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

文字を斜体にしたいだけなのにem要素を使っている
セマンティクスとしての強調ではなく、見た目の装飾だけが目的ならemではなくCSSでfont-style: italic;などを指定しましょう。
段落全体や長い文章を丸ごとemで囲んでしまう
どこが特に重要なのか分からなくなってしまいます。強調したい部分を1語〜数語程度に絞り、その部分だけをemで囲むようにしましょう。
本来は重要性を示したいのにemを使っている
注意書き・警告・重要な条件など、「読まないと困る情報」はニュアンスではなく重要度を示したいのでstrong要素の方が適しています。
emとstrongをデザイン目的で混ぜている
どちらもセマンティックな意味を持つ要素なので、「太字にしたいからstrong」「斜体にしたいからem」という使い分けは避けましょう。デザインはCSS、意味付けはHTML要素と役割を分けるのがコツです。