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

試してみましょう

<p>Get out of bed <em>now</em>!</p><p>We <em>had</em> to do something about it.</p><p>This is <em>not</em> a drill!</p>

/* stylelint-disable-next-line block-no-empty */em {}

属性

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

使用上のメモ

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

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

<i> と <em>

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

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

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

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

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

例

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

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

結果

技術的概要

仕様書

ブラウザーの互換性

関連情報

• <i>