強調テキストにはstrongタグってやつも無かったっけ？どこがどう違うの？？？
こんな疑問を解決する記事です。
ある一部のテキストを強調して、ブラウザで斜体（イタリック体）で表示するには<em>というHTMLタグを使用します。
ですが、同じく斜体表示するためのタグとしては<i>というのもあるので、両者は目的に合わせて使い分けましょう。
もうひとつ、強調テキストには<strong>で太字にするやり方も存在しますが、<em>と<strong>には強調度に少しだけ差があるので、その辺りも詳しく解説しますね。
スポンサードサーチ
本記事のもくじ
【emタグとは】テキストを強調するHTMLタグ
<em>は、囲んだテキストを強調する意味を持つHTMLタグです。
<p>お好み焼きを作るときは、ヘラで<em>押し付けない</em>ようにしましょう。</p>
<p>じっと我慢して待つことで<em>ふっくら</em>と仕上がります。</p>ブラウザでは強調表示される
じっと我慢して待つことでふっくらと仕上がります。
このように、<em>で囲んだ部分のテキストは強調されて表示されます。
ブラウザの初期設定では、斜体文字（イタリック体）で表示されるようになっていますが、CSSで自分なりにカスタマイズすることも可能です。カスタマイズ方法は本記事の最後で解説しています。
emタグの正しい使い方
<em>の正しい使い方をマスターしましょう。
すべてのHTMLタグに言えることですが、HTMLタグにはそれぞれ意味があります。もちろん、<em>も“囲んだ部分を強調する”という意味を持ちます。
よって、「このテキストを斜体にしたいから」というデザイン視点での使用は避け、あくまでも“意味を強調”したい部分に使うべきです。
デザイン目的でテキストを斜体にしたい
デザイン目的のイタリック体テキストを表示したいのであれば、<span>でclass属性をつけ、CSSで文字を斜体にするカスタマイズを施しましょう。
<p>単にデザインで文字を車体にしたい場合は、spanタグで囲みつつ、class名をつけて、CSSで装飾します。</p>
<p>ここを<span class="design-italic">斜体（イタリック体）</span>にする。</p>.design-italic {
font-style: italic;
}
こんな感じですね。クラス名は自由に決めてください。
<span>については、下記の記事で詳しく解説しています。
» 参考記事：【spanタグとは】意味と使い方をHTML初心者向けに解説
emタグはどこで使うべきか
<em>は、段落や見出しの中で使うタグです。
常に<p>や<h1>~<h6>の中に入っていることを確かめながら使いましょう。
<em>の中に<p>や<h1>~<h6>が入ってしまうと、ブラウザ上で強調表示されないばかりか、HTMLの記述ルールに反するので注意が必要です。
<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) は、有鱗目オオトカゲ科オオトカゲ属に分類されるトカゲ。コモドドラゴンとも呼ばれる。
こちらの文章がどのような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で自由に変更することができるので、サンプルを書いておきますね。
em {
font-style: normal; /** これで斜体を解除します **/
color: #FF7676;
font-size: 20px;
font-weight: bold;
}
こんな感じで、font-styleをnormalにして、斜体を解除したら、あとは自由に色をつけたり、大きさを変えたり、太字にしたりすればOKです。
スポンサードサーチ
まとめ：emタグは斜体の強調を意味します
ということで、本記事のまとめです。
<em>は、強調したいテキストを囲むときに使うHTMLタグです。
強調タグには<strong>もありますが、度合いとしては、<strong>＞<em>と覚えておくと良いかなと思います。
また、検索エンジンには強調を伝えず、単に斜体表示にしたい場合は<i>を使えばOKです。
Wikipediaでは<em>も<strong>も使われていないので、正しい用途に迷ったら<i>、<b>で良いでしょう。
おわり。
