emタグとは?基本的な使い方と他の強調タグとの違いやSEO効果を解説
emタグとは、特定の文章を強調したいときに使うHTMLタグのことです。HTML内にemタグを設定すると、文字を斜体に表示できます。ユーザーに伝えたい文章を強調できるので、コンテンツを作成するときに積極的に使用するケースも少なくありません。
しかし、emタグ以外にもstrongタグやbタグなど文書を強調できるHTMLタグは多くあります。それぞれの違いを正しく理解して状況に応じて使い分けることが大切です。
emタグとは
emタグは、特定の文章を強調させたい際に使用するHTMLタグのことです。HTML内にemタグを設定することで、特定の文字を斜体に表示できます。
emタグの使い方はとても簡単で、際立たせたい文章をemタグで囲むだけです。
Emタグの基本形は、次のとおりになります。
<em>〇〇〇〇</em>
例:東京SEOメーカーの「SEO」を強調してみます。
- emタグがない時:<p>東京SEOメーカー</p>
- emタグがある時:<p>東京<em>SEO</em>メーカー</p>
このように、emタグで囲むと囲まれたところが斜体になります。
emタグの「EM」はemphasisの略語で、日本語で直訳すると強調という意味があります。emタグは、イーエムタグと読むのが一般的です。
emタグの属性と対応プラウザ
emタグはグローバル属性であるため、すべてのHTML要素で指定できます。また、emタグはほとんどのブラウザで対応可能です。
スマホとPCの対応ブラウザは、次のとおりです。
PCの場合 | スマホの場合 |
Chrome | Android webview |
Edge | Android版Chrome |
Firefox | Android版Firefox |
nternet Explorer | Android 版 Opera |
Opera | iOS版Safari |
Safari | Samsung Internet |
Windowsの場合、標準文字をメイリオにしているとemタグを設定しても文字は斜体になりません。emタグを記載したにもかかわらず、表示が斜体にならない場合は標準文字がメイリオに設定されている可能性があります。
emタグを使うメリット
emタグは、コンテンツを作成するときに必ず使用しなければいけないわけではありません。しかし、emタグをページ内に設置することにより、ユーザーに伝えたい文章だけを強調できます。ユーザーは閲覧するときに流し読みをすることが多いため、文章が多く並ぶページの場合は大事な文章が読まれないことも少なくありません。
また、装飾がない文章は単調になるため、読みづらいと感じるユーザーも多いです。文章を読んでる途中で読むことが面倒になってしまい、ページから離脱される可能性もあります。重要な部分だけをサッと読みたいユーザーは多いので、emタグで文字を強調させて訪問者の目に留まる工夫をすることが重要です。
emタグを使う際の注意点
emタグで特定の文章を強調することで、届けたい情報をユーザーに読んでもらいやすくなります。また、emタグで文章にリズムが生まれるため、最後まで目を通してもらえるのもメリットです。ただし、多くのメリットがあるemタグですが、コンテンツ内で多用するのはおすすめしません。
emタグを使いすぎると、最終的にどこが重要なのか分かりづらくなります。ユーザーに最後まで読んでもらえたとしても印象に残らないので、emタグの乱用は控えてください。emタグは適度に設定し、ユーザーの興味を惹けるように工夫することが大切です。
他の強調タグとの違い
emタグは文字を斜体にするHTMLタグですが、ほかにもさまざまな種類があります。たとえば、特定の文字を太文字にできるstrongタグは、Googleの検索エンジンに対して文字の重要性を伝えられます。
太字に装飾できるHTMLタグには、bタグもあります。ただし、bタグはstrongタグのようにGoogleに対して重要性を表すものではありません。単に文字を太字にして装飾したい場合に便利なHTMLタグになります。strongタグやbタグなどemタグ以外にもさまざまな種類の強調タグがあるので、目的に応じて使い分けることが大切です。
iタグとemタグの違い
Iタグは、emタグと同じように文字を斜体にできるHTMLタグのことです。Iタグはフォント(文字)をイタリック体にするためのタグで、イタリック体は右側に傾いているので、見た目がemタグと同じように見えます。
- emタグ・・・強調されている斜体
- iタグ・・・イタリック体の斜体
強調したい場合は、iタグではなくてemタグを使うと良いです。iタグはグローバル属性なので、すべてのHTML要素で使用可能です。iタグの使い方もとても簡単で、強調させたい文章をiタグで囲むだけです。
iタグの基本形は、次のとおりになります。
<i>〇〇〇〇</i>
※〇〇に文言が入ります
strongタグとemタグの違い
strongタグは、文章を太文字にできるHTMLタグのことです。strongタグは検索エンジンに対して文字の重要性を伝えられるという特徴があります。strongタグを記事のメインキーワードに近い単語に使えば、SEO効果が得られます。
- emタグ・・・文字を斜体にして強調するだけで検索エンジンには重要性を伝えない。
- strongタグ・・・文字を強調し、検索エンジンに重要性も伝える。
strongタグは、グローバル属性なので、すべてのHTML要素で使用可能です。使い方も簡単で、強調させたい文章をstrongタグで囲むだけです。
strongタグの基本形は、次のとおりになります。
<strong>〇〇〇〇</strong>
※〇〇に文言が入ります
bタグとemタグの違い
bタグは、文章を太文字にできるHTMLタグのことです。太文字に装飾できるという意味ではstrongタグと同じですが、bタグは単に太くするだけで検索エンジンに重要性を伝えるものではありません。
- emタグ・・・文字を斜体に表示する
- bタグ・・・文字を太文字に表示する
文字を強調させることが目的であれば、bタグを使用するのがおすすめです。bタグの使い方もとても簡単で、文章をbタグで囲むだけです。
bタグの基本形は、次のとおりになります。
<b>〇〇〇〇</b>
※〇〇に文言が入ります
CSSで文字を斜体にする方法
emタグで文字を斜体にする方法以外に、CSSと呼ばれるスタイル言語で文字を斜体にする方法もあります。ここでは、CSSで文字を斜体にするメリットや設定方法を紹介します。
そもそもCSSとは
CSSは、「Cascading Style Sheets」の略称でスタイルシートと呼ばれる言語のことです。HTMLとCSSはセットで使われることが多いですが、HTMLはWebサイトの基本構造を作成するためのプログラム言語になります。
一方、CSSはHTMLで構築した基本構造にデザインを加えて、Webサイト全体を装飾するプログラム言語です。HTMLにemタグを直接設置しても問題ありませんが、単に文字を斜体にしたいならCSSで文字を装飾することもできます。
CSSを使用するメリット
emタグで文字を斜体にするのではなくCSSを使用する際のメリットは、次のとおりです。
- テキストの構造を維持できる
- メンテナンスがしやすい
- SEO効果を得られる
テキストの構造を維持できる
HTMLとCSSの役割を分けてサイトを管理することで、文書構造を維持できるメリットがあります。なぜなら、HTMLに基本構造に加えて装飾まで設定するとソースコードが複雑になるためです。最悪の場合、文章構造が崩れる原因にもなるので、文字に装飾を加えたいときはHTMLではなくCSSに設定するのがおすすめです。
メンテナンスがしやすい
基本構造を構築するHTMLとデザインを加えるCSSの役割を分けて作成することで、サイトをメンテナンスしやすいといったメリットがあります。
たとえば、Webサイトのデザインや文字の装飾を変更したい場合、HTMLのみで構成するとソースコードをひとつずつ修正しなければいけません。CSSを使用すればCSSファイルだけ修正すれば良いので、サイトのメンテナンスを行いやすいのです。
SEO効果を得られる
HTMLとCSSで役割を分けてWebサイトを構築することで、ソースコードに余計なコードがなくなるのでソースコードの軽量化につながるメリットがあります。ソースコードを軽量化すると、ユーザーが訪問したときに素早くページが表示されます。サイトの表示速度が速いと検索エンジンから高い評価を受けられるので、SEO的にはCSSでコーディングした方が良いです。
CSSで文字を斜体にする方法
CSSで文字を斜体にする場合、font-styleを使用します。font-styleとは、CSS のプロパティでフォントスタイルを指定できる機能です。CSSで文字を斜体にしたいときは、font-styleに斜体フォントのitalic(イタリック体)を記入します。
font-styleでは文字のスタイルを装飾することができるので値にitalic(斜体)を設定することで文字を斜体にすることができます。
font-style: italic
}
例:
1.HTMLコード
<p class=”syatai”> 東京SEOメーカー</p>
2.CSSコード
.syatai{font-style: italic
}
3. HTMLとCSSのコーディング結果:東京SEOメーカー→東京SEOメーカーとなります。
emタグによるSEO効果
emタグは文字を斜体にして強調しますが、特にSEO効果があるというわけではありません。
おすすめ動画:Is there a difference between the “strong” and “b” tags in terms of SEO?
こちらの動画でGoogleの公式見解が確認できます。SEO効果がないと言っても、emタグを使うことにより読みやすくなり、ユーザビリティが向上すればそういう点においてはSEO効果があります。
まとめ