<em>強調する

<em>タグは文章の一部を強調(emphasis)するために使用する要素です。 例えば語気を強調するためなどに使われます。

強調の強さは、子孫に含まれるem要素の数で決まります。 例えば<em>~</em>を入れ子にし、特定の箇所のみ強調の度合いを高める事ができます。

一般的なブラウザでは、em要素は斜体で表示されるためi要素と混同しがちですが、意図する意味は全く異なります。 em要素は、ある事柄を特に強く主張する強調を表します。例えば文章のニュアンスを表現したい場合などに使用します。 それに対しi要素は声や雰囲気を斜体で表現したい場合などに使用します。

またem要素を使用すると、強調する場所によっては同じ文章でもニュアンスが変わる可能性があります。 例えば「フジリンゴは美味しい」という文章の場合、「<em>フジリンゴ</em>は美味しい」とすれば、他のリンゴではなく「フジリンゴ」が美味しいという意味になります。 逆に「フジリンゴは<em>美味しい</em>」とすれば、フジリンゴは美味しくないという考えに対して、フジリンゴは「美味しい」というニュアンスで受け取れるでしょう。

もう少し詳しく言うと、例えばプレゼンテーションなどをする際に何かを強調したい場合は、少し間をおいて、ゆっくり、もしくは語調を変えて話しますが、このような箇所にこそem要素を使用します。 これは実際に読み上げブラウザなどを利用した場合でも、em要素の部分は読み方が変わります。

HTML5での変更点

HTML4.01のem要素は、意味を強めるといった強調を示しましたが、HTML5ではニュアンスに変化をもたらすような強調となりました。 またem要素を組み合わせる事で、フレーズ全体を強調し、さらにその中の一部分をより強く強調させる事などもできます。

なおem要素には、事柄全体の成否や本質に関わる「重要性」を示す役割はありませんので、そういった箇所には<strong>タグを使用します。

書式

  • <em 属性="値">~</em> ……… 語気を強調する

使用した時の例

<p>リンゴは好きじゃないかも。でも<em>フジリンゴ</em>は美味しいよね。<br />
あのシャキシャキ感が、<em>とっても<em>美味しく</em></em>感じる理由かも</p>

ブラウザ上の表示例

リンゴは好きじゃないかも。でもフジリンゴは美味しいよね。
あのシャキシャキ感が、とっても美味しく感じる理由かも

※em要素の部分は一般的なブラウザではイタリック体で表示されますが、上記の場合フォントにイタリックが用意されていないため、ノーマルのスタイルで表示されています。

対応ブラウザなどのデータ

形式 <em>~</em> カテゴリ フローコンテンツ, フレージングコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~