em 要素

4.5.2 em 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
フレージング・コンテント
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
あらゆるロールの値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う。

em 要素は、そのコンテンツの強勢強調を表します。

コンテンツの特定の部分が持つ強勢のレベルは、祖先の em 要素の数で表されます。

強勢強調を配置すると、文の意味が変わります。ゆえに、この要素は、コンテンツで不可欠な部分を形成します。このように強調を使う場合、その正確な使い方は、言語に依存します。

これらの例は、強勢強調を変更することで、どれだけ意味が変わるかを示しています。最初は、強勢を付けずに事実を淡々と述べています:

<p>猫は可愛らしい動物です。</p>

最初の単語を強調すると、この議論では動物の種類が問題になっているというニュアンスになります(誰かが、犬がキュートなんだ、と言い張っているのかもしれません。):

<p><em>猫は</em>可愛らしい動物です。</p>

強勢を動詞に移すと、文章全体の真実性が問題になっているという点が際立つことになります(誰かが、猫はキュートでない、と言っているのかもしれません。):

<p>猫は可愛らしい動物<em>です</em>。</p>

強勢を形容詞に移すと、猫の本当の性質が再強調されます(誰かが、猫はみずぼらしい動物だ、と言っているのかもしれません。):

<p>猫は<em>可愛らしい</em>動物です。</p>

同様に、猫は野菜だと主張する人がいたのなら、これを訂正しようと、最後の単語を強調するでしょう:

<p>猫は可愛らしい<em>動物</em>です。</p>

文章全体を強調すると、話者が言いたいことを伝えようと一生懸命になっているということがはっきりとします。この種の強勢強調も、通常は、句読点にも影響を与えます。それゆえに、ここにビックリマークがあるのです。

<p><em>猫は可愛らしい動物です!</em></p>

かわいらしさの強調と組み合わせて怒りを表したいなら、次のようなマークアップになるでしょう:

<p><em>猫は<em>可愛らしい</em>動物です!</em></p>

em 要素は、一般的な "イタリック" 要素ではありません。違うムードや音声を表すようなテキストを、その段落の他の部分から際立たせようとすることがありますが、この場合は、i 要素のほうが適切です。

em 要素は、重要性を伝えるものでもありません。この場合は、strong 要素のほうが適切です。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-em-element