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>

em {
  /* ここにスタイルを追加 */
}

属性

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

使用上のメモ

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

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

<i> と <em>

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

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

つまり、どちらを使うのが正しいかは場面によります。どちらも純粋な装飾目的ではありません。それは CSS によるスタイル設定の役割です。

<em> の例としては次のようなものがあります。

<p>Just <em>do</em> it already!</p>
<p>We <em>had</em> to do something about it.</p>

このテキストを読む人やソフトウェアは、イタリック体の単語を、語調を強調して発音するでしょう。

<i> の例としては次のようなものがあります。

<p>The word <i>the</i> is an article.</p>
<p>The <i>Queen Mary</i> sailed last night.</p>

ここでは、"Queen Mary" という言葉に特別な強調や重要性が置かれているわけではありません。単に、問題となっている対象がメアリーという名の女王ではなく、"Queen Mary" という名の船であることを示しているに過ぎません。

例

この例では、<em> 要素を使用して、2 つの材料リストの間に存在する暗黙的または明示的な対比を強調しています。

<p>
  HTML 5 では、以前は<em>ブロックレベル</em>コンテンツと呼ばれていたものが、現在は<em>フロー</em>コンテンツと呼ばれるようになりました。
</p>

結果

技術的概要

仕様書

ブラウザーの互換性

関連情報

• <i>