定義と使い方
<em>タグは、
周囲のテキストと比較して文脈的に重要な内容を強調(stress emphasis)するために使用されます。
このタグは、周囲のテキストよりも文脈的に特に重要な内容を強調し、ユーザーの注意を引く役割を果たします。
<em>タグは、文中において明示的または暗示的な対比を表現する際に主に使用されます。<em>タグが文中のどこに配置されるかによって、文中で強調される意味やニュアンスは変わります。
活用例
次の例は、<em>タグが文中で明示的または暗示的な対比を表現しているかどうか、また文中のどこに配置されるかによって、文の意味やニュアンスがどのように変化するのかを示しています。
<em>タグを使用していない一般的な文
<p>子犬は賢い動物です。</p>
子犬は賢い動物です。
「子犬」は賢い動物です。
「子犬」という単語を強調することで、この記述は、議論の対象となっている動物の種類そのものが問題になっていることを示唆しています。(おそらく、誰かが猫は賢いと主張する可能性もあるでしょう。)
<p><em>子犬</em>は賢い動物です。</p>
子犬は賢い動物です。
多くのブラウザでは、<em>タグの文字スタイル(font-style)をイタリック体(italic)で表示します。
「賢い」を強調」
「賢い」という形容詞を強調することで、子犬の正確な性格が改めて確認されます。(おそらく、誰かが子犬は愚かな動物だと主張する可能性もあるでしょう。)
<p>子犬は <em>賢い</em> 動物です。</p>
子犬は 賢い 動物です。
「動物です」を強調
同様に、もし誰かが子犬は植物だと主張した場合、それを正す人が「動物です。」を強調することもあります。
<p>子犬は賢い<em>動物です。</em></p>
子犬は賢い動物です。
文全体を強調
文全体を強調することで、この文の要点を伝えようとしていることが明確になります。この種の強調は一般的に句読点にも影響を与えるため、ここでは感嘆符(!)を示しています。
<p><em>子犬は賢い動物です!</em></p>
子犬は賢い動物です!
使用方法に関する注意事項
単にイタリック体を使用したい場合は
多くのブラウザでは、<em>タグの文字スタイル(font-style)をイタリック体(italic)で表示します。
しかし、単にスタイルのためだけにイタリック体を使用する目的で <em> タグを使ってはいけません。見た目のスタイルだけでイタリック体を使用したい場合は、CSS の font-style: italic; を使用してください。
<p><span style="font-style:italic;">子犬</span>は賢い動物です。</p>
子犬は賢い動物です。
<em>タグと<i>タグの違い
多くの開発者がHTMLを扱う際によく混乱する点の一つは、異なるタグであるにもかかわらず、ブラウザ上では同じ表示結果になる場合があることです。
<em>タグと<i>タグが代表的な例です。
どちらもブラウザでは、文字スタイル(font-style)がデフォルトでイタリック体(italic)に設定されています。
視覚的な効果は同じですが、これら二つのタグが持つ意味は異なります。両者を比較すると、次のような違いを確認できます。
| 比較 | <em> |
<i> |
|---|---|---|
| 強調の意味 | 周囲のテキストと比べた文脈的な強調 | 周囲のテキストと比べて、何らかの理由により区別する必要がある点を強調 |
| 使用目的 | テキストの意味を強調 | テキストの用途を強調 |
文脈的な強調
<p>今日は<em>雨が降るでしょう</em>。</p>
上のコードで <em> タグで強調された部分は、文の主な内容を示す重要な情報であるため、ユーザーに文の主要な内容を伝えるのに役立ちます。
周囲のテキストと比べて、何らかの理由で区別する必要がある点
<p>優しく明るい<i>ペルシャ</i>は、本当に可愛いペットの猫です。</p>
上のコードで <i> タグで強調された部分は、「ペルシャ」が猫の品種であることを、周囲のテキストと区別するために使用されています。
<em>タグと<strong>タグの違い
<strong>タグは
その内容の重要性、深刻さ、または緊急性を強く強調(strong importance)するために使用するタグです。このタグは、見出しやキャプション、段落などで重要な部分を明確に強調し、通常のテキストと区別できるようにします。
<strong>タグは文中のどこに配置されても文の意味が変わることはありません。単に「非常に重要な内容」を持つという固有の意味で使用されるのに対し、<em>タグは文中で明示的または暗示的な対比を表現する際に主に使用され、タグが文中のどこに配置されるかによって文の意味が変わります。
周囲よりもはるかに重要なテキストには、<strong>タグを使用してください。
技術的文法の要約
ブラウザ互換性
| タグ |
デスクトップ Chrome
|
デスクトップデスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
|---|---|---|---|---|
<em>
|
1 | 12 | 1 | 4 |
仕様書
| 仕様書 | |
|---|---|
<em>
|
HTML Standard #the-em-element |