ブログをリニューアル予定。過去記事は削除するかもです。

【emタグとは】テキスト強調のHTMLタグを解説(iタグ・strongタグとの違い)

【emタグとは】テキスト強調のHTMLタグを解説(iタグ・strongタグとの違い)

emタグは文字を斜体にするのか。iタグっていうのもあるな。どこがどう違うの?

強調テキストにはstrongタグってやつも無かったっけ?どこがどう違うの???

 

こんな疑問を解決する記事です。

ある一部のテキストを強調して、ブラウザで斜体(イタリック体)で表示するには<em>というHTMLタグを使用します。

ですが、同じく斜体表示するためのタグとしては<i>というのもあるので、両者は目的に合わせて使い分けましょう。

もうひとつ、強調テキストには<strong>で太字にするやり方も存在しますが、<em><strong>には強調度に少しだけ差があるので、その辺りも詳しく解説しますね。

 

スポンサードサーチ

【emタグとは】テキストを強調するHTMLタグ

【emタグとは】テキストを強調するHTMLタグ

<em>は、囲んだテキストを強調する意味を持つHTMLタグです。

 

emタグの使い方
<p>お好み焼きを作るときは、ヘラで<em>押し付けない</em>ようにしましょう。</p>
<p>じっと我慢して待つことで<em>ふっくら</em>と仕上がります。</p>

ブラウザでは強調表示される

お好み焼きを作るときは、ヘラで押し付けないようにしましょう。
じっと我慢して待つことでふっくらと仕上がります。

 

このように、<em>で囲んだ部分のテキストは強調されて表示されます。

ブラウザの初期設定では、斜体文字(イタリック体)で表示されるようになっていますが、CSSで自分なりにカスタマイズすることも可能です。カスタマイズ方法は本記事の最後で解説しています。

 

emタグの正しい使い方

<em>の正しい使い方をマスターしましょう。

すべてのHTMLタグに言えることですが、HTMLタグにはそれぞれ意味があります。もちろん、<em>も“囲んだ部分を強調する”という意味を持ちます。

よって、「このテキストを斜体にしたいから」というデザイン視点での使用は避け、あくまでも“意味を強調”したい部分に使うべきです。

 

デザイン目的でテキストを斜体にしたい

デザイン目的のイタリック体テキストを表示したいのであれば、<span>でclass属性をつけ、CSSで文字を斜体にするカスタマイズを施しましょう。

 

spanタグで斜体を作る
<p>単にデザインで文字を車体にしたい場合は、spanタグで囲みつつ、class名をつけて、CSSで装飾します。</p>
<p>ここを<span class="design-italic">斜体(イタリック体)</span>にする。</p>
CSSで斜体を装飾する
.design-italic {
  font-style: italic;
}

 

こんな感じですね。クラス名は自由に決めてください。

<span>については、下記の記事で詳しく解説しています。

» 参考記事:【spanタグとは】意味と使い方をHTML初心者向けに解説

 

emタグはどこで使うべきか

<em>は、段落や見出しの中で使うタグです。

常に<p><h1>~<h6>の中に入っていることを確かめながら使いましょう。

<em>の中に<p><h1>~<h6>が入ってしまうと、ブラウザ上で強調表示されないばかりか、HTMLの記述ルールに反するので注意が必要です。

 

emタグ:良い例・悪い例
<p>これは良い例です。<em>emタグ</em>がpタグの中に使われています。</p>
<em><p>これは悪い例です。emタグがpタグの外に使われています。</p></em>

 

iタグ・strongタグとの違い

テキストを強調するときに使うHTMLタグとして、<i><strong>もあります。

<em><i><strong>は似ているようで違うので、そこを解説しますね。

 

emタグとiタグの違い

<em>と同様に<i>で囲った部分も、ブラウザでは斜体になって表示されます。

ですが、<i>には検索エンジンに意味を伝える役割がありません。

 

  • <em>:読者にも検索エンジンにも強調を伝える。
  • <i>:デザイン的に文字を斜体に変える。読者には強調が伝わる。

 

こんな感じ。

<i>は、“意味そのものは強調しなくても良いが、他と区別したいテキスト”に使うと良いかなと思います。例えば、専門用語や外来語などがそれに当たります。

 

emタグとstrongタグの違い

<em>と同じく強調の意味を持つHTMLタグとして<strong>があります。

どちらかと言えば、<strong>の方が強調や緊急度を示す意味合いは強いので、前後の文脈の中でも最も注目してほしい部分には<strong>を使いましょう。

読者が<strong>の部分に先に目を通しても意味が伝わる部分には、<strong>を使うべきです。

ちなみに、<strong>の多用はSEO的に禁物です。「【strongタグとは】「bタグとどう違うの?」を分かりやすく解説します」で詳しい解説をしているので、そちらも参考にどうぞ。

 

Wikipediaの例を見せます

説明だけだと分かりにくいと思うので、Wikipediaがどのように強調タグを使い分けているのか、例を挙げて解説します。

 

コモドオオトカゲ (Varanus komodoensis) は、有鱗目オオトカゲ科オオトカゲ属に分類されるトカゲ。コモドドラゴンとも呼ばれる。

» 参照:Wikipedia コモドオオトカゲ

 

こちらの文章がどのようなHTMLタグで書かれているかを見てみますね。

※ちなみに、実際にはテキストリンクが貼られているところもありますが、今回の解説には不要なので省いています。

 

HTML
<p><b>コモドオオトカゲ</b> (<i>Varanus komodoensis</i>) は、有鱗目オオトカゲ科オオトカゲ属に分類されるトカゲ。<b>コモドドラゴン</b>とも呼ばれる。</p>

 

[コモドオオトカゲ]という主役の単語は<b>で太字に強調されていますね。

そして、学術名の[Varanus komodoensis]が<i>でイタリックになっているのが分かります。

 

あれ?<em><strong>も使われてなくない?

 

そう感じた、そこのあなた。鋭いです。

Wikipediaでは<em><strong>も使われていないんですね。

これは、コモドオオトカゲのページだけでなく他のページも同じでして、Wikipediaでは基本的に、太字は<b>、斜体は<i>で書かれています。

つまり、検索エンジンには強調を伝えていないということ。

strongタグの解説ページでもお伝えしていますが、太字も斜体も根本的な考え方は同じなので、正しい使い方ができているか不安なときは<i><b>を使っておけば間違いないかなと思います。

 

CSSでemタグをカスタマイズする方法

冒頭にお伝えした通り、<em>は、デフォルトで斜体表示するように設定されています。

これはCSSで自由に変更することができるので、サンプルを書いておきますね。

 

CSSでemタグをカスタマイズ
em {
 font-style: normal; /** これで斜体を解除します **/
 color: #FF7676;
 font-size: 20px;
 font-weight: bold;
}

CSSでemタグをカスタマイズする方法

 

こんな感じで、font-stylenormalにして、斜体を解除したら、あとは自由に色をつけたり、大きさを変えたり、太字にしたりすればOKです。

 

スポンサードサーチ

まとめ:emタグは斜体の強調を意味します

まとめ

ということで、本記事のまとめです。

<em>は、強調したいテキストを囲むときに使うHTMLタグです。

強調タグには<strong>もありますが、度合いとしては、<strong><em>と覚えておくと良いかなと思います。

また、検索エンジンには強調を伝えず、単に斜体表示にしたい場合は<i>を使えばOKです。

Wikipediaでは<em><strong>も使われていないので、正しい用途に迷ったら<i><b>で良いでしょう。

おわり。