HyperText Markup Language em element.
em要素は強調されたテキストの範囲を表します。特に、強調する場所が異なると意味が変わってしまうようなところに使います。
ただ単に、見た目においてイタリック体にする事で、目立たせたいだけの場合は、em要素は適していません。その場合、もし、そのテキストにセマンティクスがあれば、i要素や mark要素を検討してください。そして、ただ単にデザインの一環としてイタリックにしたいだけなら CSSを使ってください。
HTML5では、旧来の HTMLとは異なり、em要素は重要性を表しません。もし重要性を表したい場合は、strong要素を使ってください。
強調する場所が異なる事で、意味が変わってくるような利用例を見てみましょう。
em 要素の利用例
<p>私は<em>昼食に</em>カレーを食べたかったんだ。</p>
<p>私は昼食に<em>カレー</em>を食べたかったんだ。</p>
em 要素の利用例のサンプル
私は 昼食に カレーを食べたかったんだ。
私は昼食に カレー を食べたかったんだ。
これらの2つのフレーズは、いずれも文章は同じです。しかし、em要素で強調している部分が違います。そのため、これらの2つのフレーズの間に、ニュアンスの違いを感じるはずです。前者は、朝食なのか昼食なのか夕食なのかが問題になっていたのでしょう。後者は何を食べたかったかが問題になっていたのでしょう。
もちろん、フレーズ全体を em要素でマークアップしても構いません。ただし、その場合は、そのフレーズが強調される事で、何かしらの意味が伝わらなければいけません。
フレーズ全体を強調するマークアップ例
<p>教室では、みんなが好き放題におしゃべりしていた。そのため、一向に授業が始まらない。そのとき、学級委員長が叫んだ。</p>
<p><em>静かにしろ！</em></p>
<p>普段おとなしい学級委員長が、こんなに大きな声で叫んだのは、初めて聞いた。</p>
em要素は、ネストする事で、その強調の度合いを強める事もできます。
強調の度合いを強めるマークアップ例
<p>母はうどんが食べたいと言いだした。妹はスパゲッティを食べたいと言いだした。</p>
<p>結局、うどんを食べに行くことになってしまった。しかし、私は何も言いだせなかった。</p>
<p><em>私は昼食に<em>カレー</em>を食べたかったんだ！</em></p>
<p>たぶん、言ったところで、彼女たちは聞き入れてくれなかっただろう。</p>
このサンプルでは、自分が言いたかったこと全体が強調されています。そして、さらに、食べたかったのがカレーであることも強調されています。
em {
font-style: italic;
}