em要素

Webページでは、単語や段落全体を強調したい時があります。

本ページでは、em要素について説明します。

em要素とは

em要素は、強調する内容を示す時に使います。ブラウザ上では、イタリック体(斜体)で表示されます。

emの定義は、以下のとおりです。

【emの定義】
コンテンツカテゴリ フローコンテンツフレージングコンテンツ認知可能コンテンツ
可能な親要素 フレージングコンテンツを包含できる要素
可能なコンテンツ フレージングコンテンツ
タグの省略 不可
DOMインターフェース HTMLElement

なお、日本語のフォントではイタリック体を持たないもの(メイリオなど)も多く、その場合はイタリック体で表示されません。

利用例

以下は、emを使ったHTMLの例です。

【emの利用例】
<p>I like <em>cats</em>.</p>

これは、他の人が犬が好きですと言った後に、猫(cats)を強調する時に使うような例です。

他の人が猫が嫌いと言った後、否定するのであれば「like(好き)」をemで囲むのが適切になります。

上記により、以下のように表示されます。

ブラウザの画面で、「I like cats.」と表示されていて、cats部分だけ斜体で表示されています。

cats部分だけイタリック体で表示されています。

属性

グローバル属性が使えます。

i、strong、mark要素との違い

i、strong、mark要素の概略は、以下のとおりです。

i
i要素も斜体で表示されますが強調的な意味を持たず、単に見た目上で前後の単語と区別する時に使います。例えば、専門用語や外国語の単語などで使われます。
strong
strong要素は、重要性、深刻性、緊急性などがある内容で使います。例えば、見出しの一部や注意書きなどです。
mark
mark要素は、関連性のある単語などを示します。例えば、検索結果の表示で検索した単語に使います。

em要素は、強調的な意味を持たせる時に使います。例えば、段落の一部に使って強調したり、要点を示すために段落全体に使って強調したりします。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
em
【スマートフォン】
項目 Sa An Op Ch Fx Sm
em
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

HTML要素(タグ)一覧」に戻る