<em> - 強調

emとは、強調したい言葉をマークアップするためのタグです。説明をする際に、「〜ではなく〜だ」「〜ではなく〜こそ」というよう場合の後者の「〜」をマークアップします。あくまで「強調」であって、「重要」という意味はないのでご注意下さい。ドキュメントの中で重要な部分をマークアップするには、strongタグを用います。emは、英語のemphasisから来ています。

説明

emタグは強調という意味を持ちます。では一体、強調とはどういうことか、いくつか例を見ていきましょう。例えば、犬好きな人が書くとすれば、次のような文章です。

HTML

<p>黒柴は可愛い犬だよね。</p>

しかし、emタグで「黒柴」の部分を強調してみましょう。すると、「黒柴は特に」という意味合いになります。先ほどとは変わって、「犬の中でも特に『黒柴』が可愛い犬だ」、または「他の犬は可愛くないけど、『黒柴』は可愛い犬だ」というテキストになります。

HTML

<p><em>黒柴</em>は可愛い犬だよね。</p>

黒柴は可愛い犬だよね。

emタグで「犬」の部分をマークアップしたらどうでしょうか?今度は、他人が黒柴のことを猫か何かと勘違いしていることを受けて、「黒柴は、可愛い猫でも可愛いカバでもなく、可愛い『犬』だ」と、犬であることを強調したテキストになります。

HTML

<p>黒柴は可愛い<em>犬</em>だよね。</p>

続いて、emタグで「可愛い」の部分をマークアップしてみました。すると今度は、「黒柴は怖い犬じゃない、『可愛い』犬なんだ」という意味合いになりました。このように、マークアップする言葉で、テキストのニュアンスが変わってくるのが、emタグの面白いところです。

HTML

<p>黒柴は<em>可愛い</em>犬だよね。</p>

テキスト全体を強調する

テキスト全体をemタグで囲むと、「黒柴は可愛い」というメッセージの強い主張になります。このテキストの主が「黒柴の魅力に溺れてしまっていること」を表現できます。

HTML

<p><em>黒柴は可愛い犬だよね。</em></p>

emタグでネストする

emタグの中にemタグを使った場合、さらに強い強調を表現できます。例えば、次のテキストは「黒柴は可愛い犬」であることの強い主張で、その中でも「可愛い」という言葉を強調しています。犬が苦手な人は、このテキストを書いた人とは距離を置いた方がよいかもしれません。

HTML

<p><em>黒柴は<em>可愛い</em>犬だよね。</em></p>

重要という意味はない

emタグには「強調」という意味がありますが、「重要」という意味はありません。ニュアンスの違いを意識しましょう。ドキュメントの中で重要なテキストであることをアピールしたい場合は、emタグではなく、strongタグを用いるのが適切です。例えば、注意喚起を例に出すなら次の通りです。

HTML

<p>この地域では車の盗難が相次いでいます。その...%が鍵のかけ忘れだったことが原因です。<strong>車から出る時は、鍵をかけるのを忘れないようにして下さい。</strong></p>

概要

カテゴリー
Phrasing content (フレージング・コンテンツ)
コンテンツモデル
フレージングコンテンツ
利用できる場所
フレージングコンテンツが期待される場所で使用できます。
利用できる属性
グローバル属性
許可されている、全てのグローバル属性を指定できます。
タグの省略
emタグは、開始タグ、終了タグ、共に省略することはできません。
標準のスタイル
em {
	font-style: italic ;
}

参考情報

em要素に関する情報は、下記サイトで確認できます。

  • W3C … W3CによるHTML5勧告。emの項目。
  • HTML language reference … W3Cによるemのリファレンス。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。em要素の仕様。