emタグ テキストを強調する

HTMLの<em>イーエムタグはテキストの中で強調したい部分に使います。emは強調の意味を持つ「emphasis」の略です。

<p>分かったら<em>今すぐ</em>出ていってください。</p>

このページの目次

• emタグの使い方
  • 🖍装飾ではなく📣強調のために使う
  • strongタグとの違い
  • iタグとの違い
  • 段落や見出しの中で使う
  • emタグは入れ子にできる
  • CSSでemの装飾を変える方法

emタグの使い方

感覚的には、口に出して話すときに語気を強めるような部分で使います。「他ではなくこれなんです」と言いたいところや、読み間違えてほしくないところで使うイメージです。

emの使用例

<p>ここでチェックを<em>入れない</em>ことがポイントです。</p>

<p>英語学習ではじめに覚えるべきは<em>英単語</em>です。</p>

👆基本的には、1語や数語に対して使われます。

🖍装飾ではなく📣強調のために使う

<em>内のテキストは、主要ブラウザではデフォルトで斜体文字（font-style:italic）で表示されます。

しかし、<em>はあくまでも文章の流れの中で強調したい部分に使います。「斜体にしたいから」という理由で使わないようにしましょう。

参考：テキストを斜体にする

<p>ただ<span class="font-italic">ここを斜体に</span>したい</p>

.font-italic {
  font-style: italic;
}

👆単にテキストを斜体にしたい場合には、その部分を<span>でマークアップし、CSSでfont-style: italicをあてます。

strongタグとの違い

関連するページを読む

strongタグの使い方 - HTML

<em>との違いが分かりづらいのが<strong>タグです。それぞれ以下のようなシーンで使います。

実際に例を見てみると分かりやすいでしょう。

emとstrongの使用例

<p>猫を飼ってるのなら<em>今すぐ</em>帰って可愛がりましょう。</p>

<p>BBQ後、<strong>ゴミは必ず持ち帰るように</strong>してください。</p>

👆<strong>は他よりも先に目を通してほしいような重要な部分に使います。言い換えると、そこだけ先に目を通しても意味が分かるような形で使うのが理想的です。
一方<em>は、基本的に一語や数語を強調したいときに使います。

iタグとの違い

<p>こちらは<em>emタグ</span>です</p>

<p>こちらは<i>iタグ</i>です</p>

👆<i>も<em>と同じように、主要ブラウザのデフォルトスタイルでは文字が斜体で表示されます。しかし、次のようにそれぞれのタグが持つ意味は異なります。

<em>タグの詳しい意味や使い方は、次のリンク先で説明しています。

関連するページを読む

emタグの使い方 - HTML

段落や見出しの中で使う

<em>要素は記述コンテンツであり、段落などの文章の中で使われます。

<!-- 👍良い例 -->
<p>xxx<em>xxx</em>xxx</p>
<h2>xxx<em>xxx</em>xxx</h2>

<!-- 👎悪い例 -->
<em><p>xxxxxx</p></em>
<em><h2>xxxxxx</h2></em>

👆下の2つのように段落や見出し自体を囲むような形で使うべきではありません。

emタグは入れ子にできる

<p>キノコではなく<em><em>タケノコ</em></em>がいいんです。</p>

👆<em>の中に<em>を入れる（入れ子にする）ことで、より強調度を高めることができます。とはいえ入れ子にするケースはあまりないと思います。SEO効果もまずないでしょう。

CSSでemの装飾を変える方法

emに対して主要ブラウザではデフォルトでfont-style: italicがあてられてしますが、この装飾は自由に変えることができます。

<p>ここでチェックを<em>入れない</em>ことがポイントです。</p>

em {
  font-style: normal; /* 斜体を解除 */
  color: red; /* 赤字に */
  font-weight: bold; /* 太字にする */
}

👆斜体文字をやめて、太字＆赤字にするCSSサンプルです。あくまでも見栄えのためではなく、文章の流れで強調したい部分に<em>を使いましょう。