<em>: 強調要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<em>HTML の要素で、強調されたテキストを示します。<em> 要素は入れ子にすることができ、入れ子の段階に応じてより強い程度の強調を表すことができます。

試してみましょう

属性

この要素にはグローバル属性以外の属性はありません。

使用上のメモ

<em> 要素は、周囲の文字列と比較して強調される言葉のためのものであり、ふつうは文内の一語または数語に限定され、文自体の意味に影響します。

通常、この要素はイタリック体で表示されます。しかしながら、単にイタリック体のスタイルを適用するために用いるべきではありません。そのような場合は CSS の font-style によるスタイル付けを使用してください。著作物(書籍、演劇、歌など)の題名を示すためには、 <cite> 要素を使用してください。学名や他の言語の単語のようによくイタリック体が使われるような、トーンやムードが異なるテキストをマークするには <i> 要素を使用してください。これらも通常、斜体のスタイルとなりますが、異なる意味を持っています。周辺のテキストよりも高い重要性を持つテキストを示すためには、<strong> 要素を使用してください。

メモ: (訳注)日本語フォントでは斜体を持たないフォントが多く、斜体で表示されないことがあります。

<i> と <em>

新しい開発者はよく、同様の結果を生み出すために複数の要素があることによく混乱します。 <em><i> はその代表例で、どちらも文字列を斜体にするものです。違いは何でしょうか。どちらを使用するべきでしょうか。

既定では、視覚的な結果は同じです。しかし、意味論的な意味合いは異なります。 <em> 要素はその内容を強調することを表しますが、一方で <i> 要素は、外来語、架空の登場人物の考え、用語の定義を表す文字列など、通常の文章から外れた文字列を表します。(書籍や映画などの作品名には、 <cite> を使用してください。)

つまり、どちらを使うのが正しいかは場面に依存します。どちらも純粋な装飾目的ではなく、それは CSS による整形の役割です。

<em> の例は "Just do it already!" や "We had to do something about it" です。文字列を読む人やソフトウェアは、斜体の単語を強調して読み上げるでしょう。

<i> の例は "The Queen Mary sailed last night" です。ここで、 "Queen Mary" という語句に強調や重要性は与えていません。これは単に、対象物が Mary という名前の女王ではなくQueen Mary という名前の船であることを示します。<i> の別の例として "The word the is an article" があります。

<em> 要素は、暗黙的あるいは明示的な対比を表すためによく使われます。

html
<p>
  In HTML 5, what was previously called
  <em>block-level</em> content is now called <em>flow</em> content.
</p>

結果

技術的概要

コンテンツカテゴリー フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール すべて
DOM インターフェイス HTMLElement。 Gecko 1.9.2 (Firefox 4) 以前では、この要素には HTMLSpanElement インターフェイスが実装されています。

仕様書

Specification
HTML Standard
# the-em-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報