emタグとは?意味やHTMLでの使い方など徹底解説!
emタグとは、テキストを強調する(際立たせてアクセントを付ける)際に使うHTMLタグのことで、emタグの「EM」とは「emphasis」の略です。
このemタグを使えば、ブラウザ上では主にテキストがイタリック体(斜体)で表示されます。
また、emタグを使うことによる直接的なSEOへの影響はありません。
一方、emタグ以外にstrongタグやbタグもテキストを強調する目的のHTMLタグです。
さらにiタグはテキストを強調する目的ではありませんが、イタリック体にするためのHTMLタグです。
これらのHTMLタグを不適切に扱えば、クローラビリティの低下に繋がります。
具体的には、strongタグではなくてemタグを使えば、テキストの重要性を示す度合いが下がるので重み付けも下がる可能性があるというわけです。
こうした良くない状況を回避する為に、emタグの意味を把握して、適切にHTMLマークアップしましょう。
この点踏まえて今回は、emタグの意味やHTMLでの使い方など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。
emタグとは?
emタグとは、テキストを強調する(際立たせてアクセントを付ける)際に使うHTMLタグのことで、emタグの「EM」とは「emphasis」の略です。
例えば、Webページのコンテンツ内で、より検索エンジンに理解してもらいたい重要なテキスト文章があるとします。
この場合にマークアップするのが、テキストの重要性を示すためのHTMLタグです。
つまり、strongタグというわけです。
一方、Webページのコンテンツ内で、ユーザーにアピールしたいテキスト文章があるとします。
この場合にマークアップするのが、テキストを強調する(際立たせてアクセントを付ける)際に使う汎用的なHTMLタグです。
つまり、emタグというわけです。
emタグの廃止について
emタグは、HTML4.01で廃止されずにHTML5やHTML Living Standardでも残ってます。
具体的には、HTML4.01では「強調」という意味でしたが、HTML5やHTML Living Standardでは「強勢する(アクセントを付ける)箇所を表す」という意味に変更されながら、廃止されずに残ってる状態です。
※参考:<em>: 強調要素 – HTML: HyperText Markup Language | MDN
emタグとCSSで使うサイズ単位「em」の違い
emタグとCSSで使う単位「em」は、用途が全く異なります。
例えば、emタグ(<em>~</em>)は、主にユーザー向けに際立たせたいテキストを囲む際に使用するHTMLファイルに記述するタグです。
1 |
<p style="font-size: 1.5em; letter-spacing: 1em;">ホームページの順位を上げるためにSEO対策が必要です。</p> |
一方、CSS(スタイルシート)で使う単位「em」は、font-size(文字の大きさ)、letter-spacing(文字間隔)といったCSSプロパティに以下のように指定できるサイズの単位です。
1 2 3 4 |
p { font-size: 1.5em; letter-spacing: 1em; } |
このように、用途が全く異なる点が、emタグとCSSで使うサイズ単位「em」の違いです。
emタグとstrongタグの違い
emタグとstrongタグは、タグ自体に与えられた意味や目的が大きく違います。
emタグとは、テキストを強調する(際立たせてアクセントを付ける)際に使うHTMLタグのことです。
主に、ユーザーにアピールしたいテキスト文章を装飾して目立たせることが目的です。
一方、strongタグは、テキストの重要性を示すことができるHTMLタグのことです。
主に、重要なテキスト文章を検索エンジンに理解してもらうことが目的です。
このように、タグ自体に与えられた意味や目的が異なる点が、emタグとstrongタグの違いです。
emタグのHTMLでの使い方
emタグのHTMLでの使い方は、まずWebページのコンテンツ内でとくにユーザーにアピールしたいテキスト文章を見繕います。
見繕ったテキスト文章を<em>~</em>でマークアップします。
1 |
<p>ホームページの順位を上げるために<em>SEO対策</em>が必要です。</p> |
マークアップした文章をブラウザ上で確認すれば、太字斜体で表示されてるというわけです。(Windowsでメイリオのフォントを指定している場合、日本語が斜体にならないことがある)
つまり、emタグでマークアップしたテキスト文章が強調されてるというわけです。(ブラウザにより強調表現は異なる)
これが、emタグの使い方です。
ちなみに、emタグを入れ子にし、際立たせ度合いを強める使い方もあります。
1 |
<p>ホームページの順位を上げるために<em><em>SEO対策</em>が必要</em>です。</p> |
まとめ:emタグの意味を把握して、適切にHTMLマークアップしよう
emタグの意味を把握して、適切にHTMLマークアップしましょう。
一方、emタグの意味を知らなければ、使い方を誤ります。
具体的には、検索エンジンにテキストの重要性を伝えたい際にstrongタグではなくてemタグをマークアップします。
この場合、マークアップしたテキストがクロールされた際に重み付けが下がる可能性が高まります。
そうなれば、コンテンツが評価されづらくなる可能性があるというわけです。
こうした悪い状況を回避する為に、emタグの意味を把握して、適切にHTMLマークアップしましょう。
SEO対策しても検索順位が上がらない…なぜ?
SEO対策しても検索順位が上がらない…なぜ?
検索順位が上がらない理由は、SEO対策の質が低いからです。
例えば、ユーザーの検索意図を無視したり、関連性の低いコンテンツを増やす、内部リンクの最適化など疎かにします。
この場合、SEO対策の質が下がります。
そうなれば、ページやサイト自体の品質が上がらないので、Googleに評価されづらくなります。
結果、検索順位が上がらないというわけです。
こうした悪い状況を回避する為に、サイトの欠点を調査して上位化に必要な対策をご案内します(無料)。
検索順位を上げたり、検索流入を増やすにはSEOが重要!