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

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

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

emタグの使い方

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

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

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

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

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

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

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

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

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

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

strongタグとの違い

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

  • 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:強調したいテキストに使う
  • i:他と区別されるテキストに使う(専門用語や外来語など通常の文章から外れた文字列)

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

段落や見出しの中で使う

<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があてられてしますが、この装飾は自由に変えることができます。

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

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