emタグとは│htmlでの使い方と類似するタグの違いを解説

【emタグの特徴】

「emタグ」とは、HTML（HyperText Markup Language）においてテキストを強調するためのタグです。「強調」を意味する英単語「emphasis」を略して、emタグと呼ばれています。

emタグを使用する場合は、強調するテキストの前後に<em>と</em>を記述します。

【emタグの記述例】

<p>
特定のテキストに対してemタグを使用すると、一部を除きほとんどのブラウザでは<em>斜体
</em>で表示されます。
</p>

また、以下のように入れ子でemタグを記述することで、強調の度合いを高めることもできます。

<p>
以下のように入れ子でemタグを記述することで、<em><em>強調</em></em>の度合いを高めることもできます。
</p>

特定のテキストに対してemタグを使用することで、一部を除いたほとんどのブラウザで斜体表示ができます。ただし、メイリオなど斜体を持たない日本語フォントで書かれている場合は、emタグを使用しても斜体表示されません。

また、emタグはスタイル（見た目）だけではなく、セマンティック（意味的な）な強調を意味します。つまり、テキストが視覚的にどのように表示されるかだけでなく、テキストが特定の重要性や強調を持つことをブラウザや検索エンジンに伝えます。

スタイルのみの強調（斜体表示）を目的とする場合は、CSSや<i>タグの使用も考えられますが、<i>タグはセマンティックな意味を持たないため、文書の意味が重要なコンテキストでは<em>タグの利用が推奨されます。

emタグは、現在のHTMLの標準仕様である「HTML Living Standard」でも廃止されておらず、利用ができます。

HTML5が廃止されHTML Living Standardが採用された際には、一部のHTMLタグが廃止・非推奨になりました。しかし、emタグは廃止・非推奨タグの対象ではなく、HTML Living Standardにおいても今までと同様に利用ができるタグです。

HTML Living StandardはHTMLの最新の仕様を示しており、emタグがこの仕様に含まれていることは、現代のウェブ開発においても依然として重要な要素であることを意味します。

HTML4.01では、「emphasize」は「強意」と訳されることもありましたが、HTML5やHTML Living Standardでは「強調」と訳されるようになっています。

ただし、これは単に言葉の選び方の違いであり、emタグ自体の機能やセマンティックな意味合い、すなわち、テキストを強調するという基本的な役割に変化はありません。

HTMLでの「em」とCSSでの「em」は、それぞれ異なる意味と用途で使用されます。

HTMLのemタグはテキストをセマンティックに強調し、ブラウザでは通常、斜体で表示されます。一方、CSSのemはサイズの単位として使われ、特にレスポンシブデザインで要素のサイズを親要素やルート要素に対して動的に変更する際に利用されます。

CSSでのサイズの単位としては、px（ピクセル）、em（エム）、rem（レム）、%（パーセント）があります。

pxは絶対単位ですが、em、rem、%は相対単位です。親要素にfont-sizeが指定されている場合、そのフォントサイズが1emとなりますが、指定されていない場合は、ブラウザのデフォルトフォントサイズ、通常16pxが1emとなります。

【CSSにおけるemの記述例】

p {
 font-size: 1em; /* 親要素のフォントサイズに等しい、またはデフォルトで16px */
}

このように、HTMLの「em」とCSSの「em」は、名前は似ていますが全く異なる概念であり、ウェブ開発においてこれらの違いを理解し正確に使用することが重要です。

emタグは、文章の中で使われている単語の意味を強調する場合に利用されます。

■ 使用例①　新商品の紹介

<p> この春、我々の店では<em>新商品</em>が登場します。この商品は、<em>特別な素材
</em>を使用し、従来の商品とは一線を画する品質を誇ります。</p>

この例では、emタグを使用して「新商品」と「特別な素材」を強調し、読者の注意を引いています。

■ 使用例②　重要なお知らせの強調

<p>  重要：本サービスは、<em>2024年1月1日をもちましてサービス終了</em>となります。データのバックアップをお忘れなく。</p>

■ 使用例③　感情の表現

<p>この映画は本当に<em>感動的</em>でした！</p>

この例では、emタグを使用して「感動的」を強調し、読み手にその感情を強く伝えています。

■ 使用例④　重要な要点の強調

<p>提出期限は<em>2024年1月1日</em>です。遅れないようにしましょう。</p>

ここでは、emタグを使用して提出期限の日付「2024年1月1日」を強調し、その重要性を読み手に伝えています。

これらの例から分かるように、emタグは文章の中で特定のキーワードやフレーズを目立たせ、読み手の注目を引くために利用されます。

emタグと類似した効果・役割を持つタグには以下の3つがあります。

• strongタグ
• bタグ
• iタグ

類似タグと、emタグとの違いは以下になります。

それぞれの違いを詳しく解説します。

emタグとstrongタグの主な違いは、ブラウザ上での表示の仕方と、文書の構造において指定したテキストの重要性をどの程度強調するかです。

emタグでマークアップされたテキストは通常、斜体で表示され、その部分のテキストが強調されていることを意味します。一方で、strongタグでマークアップされたテキストは太字で表示され、より強く強調されます。

また、emタグはテキストがどれだけ強調されるかを示すのに対し、strongタグはさらにそのテキストが重要であることを示します。これにより、検索エンジンは文書の中で特定のテキストがどれだけ重要かを判断できます。

【strongタグを使用するケース】

<p><strong>emタグとstrongタグの違い</strong>は、ブラウザでどのように表示されるかと、検索エンジンへ指定したテキストの重要性を伝えるかどうかです。<p>

※ 上記は、検索エンジンへ「emタグとstrongタグの違い」について、記載している重要な文章であることを伝えたい場合の使用例です。

【emタグを使用するケース】

<p>emタグとstrongタグの違いは、ブラウザでどのように<em>表示</em>されるかと、検索エンジンへ指定したテキストの<em>重要性</em>を伝えるかどうかです。<p>

※ 上記は、検索エンジンへ、emタグとstrongタグの違いにはどのようなことが挙げられるかの内容を強調する場合の使用例です。この場合は、表示と重要性を強調させています。

この例から、strongタグとemタグはどちらもテキストを強調する目的で使用されますが、その程度と方法に違いがあることがわかります。適切なタグの選択は、文脈や目的によって変わるため、注意深く使い分ける必要があります。

「emタグ」と「bタグ」の主な違いは、ブラウザ上での表示方法と、それぞれのタグが持つセマンティックな意味です。emタグは、テキストを斜体で表示し、内容が強調されることを意味します。一方、bタグはテキストを太字で表示し、視覚的に目立たせます。

emタグは、その内容が強調されるべきであることを示し、検索エンジンにもその情報を伝えます。これにより、検索エンジンはページの内容を適切に理解した上でインデックスできます。一方、bタグは主に視覚的な装飾を目的とし、セマンティックな意味を持たないため、検索エンジンに特定の情報を伝えることはありません。

【emタグの使用例】

<p>この<em>単語</em>は重要な意味を持っています。</p>

【bタグの使用例】

<p>この<b>テキスト</b>は目立たせたい部分です。</p>

このように、emタグとbタグは異なる目的で使用され、emタグはセマンティックな強調を、bタグは視覚的な装飾を意図しています。それぞれのタグを使用する際は、その目的と意味を理解し、適切に選択する必要があります。

「emタグ」と「iタグ」は、両方ともブラウザ上でテキストを斜体表示しますが、用途が異なります。emタグは、テキストの意味を強調し、検索エンジンやユーザーにその重要性を伝えることを目的としています。

一方で、iタグはテキストを斜体で表示すること自体が目的で、意味の強調を伝える役割は持ちません。日本語フォントではイタリック体が少ないため、標準フォントが斜めに表示されることが一般的です。iタグは、外来語の原語表記、船名、専門用語など、通常のテキストと区別して表示する必要がある場合に適しています。

また、iタグ自体はHTMLで非推奨ではないですが、スタイリングに関しては、CSSを使用するのがベストプラクティスです。これにより、より柔軟かつ効率的なデザイン調整が可能となります。

emタグに直接的なSEO効果はありません。

また、それに類似するstrongタグ、bタグ、iタグは、直接的なSEO効果を持たないと広く認識されています。これは、Googleや他の検索エンジンがこれらのタグをコンテンツの重要な部分として特別に評価しないためです。

事実、Googleのマット・カッツ氏も2013年に、「Googleはstrongタグやbタグ、emタグ、iタグを同じように扱う。ランキングには影響を与えない」と公式に述べています。

ただし、emタグを適切に使用することでユーザーが文章を読みやすくなれば、ユーザビリティが向上し間接的なSEO効果が期待できる可能性があります。

ユーザビリティが優れているWEBサイトは、訪問者の滞在時間を増やし、離脱率を減少させることができるため、これが結果としてSEOにポジティブな影響を与える可能性があります。

CSSを利用して、emタグによって斜体表示されるテキストのスタイルをカスタマイズすることができます。例えば、デフォルトの斜体表示を通常のスタイルに戻すには、「font-style: normal;」と記述します。このようにして、emタグ内のテキストは通常のフォントスタイルで表示されるようになります。

【斜体にならないようにする場合のCSSの記述例】

em {
　font-style: normal;
}

また、テキストの色、フォントサイズ、太さなども自由にカスタマイズできます。
以下に、色を緑に、フォントサイズを16pxに、太さを太字に設定する例を示します。

【装飾を変更する場合のCSSの記述例】

em {
　color: #00a400;
　font-size:16px;
　font-weight: bold;
}

color・font-size・font-weightを指定することで、自由に装飾を変えることができます。

また、CSSではなくHTMLのスタイル属性でも同様の変更ができます。

<em style="font-style:normal; color:#00a400;font-size:16px;font-weight: bold;">スタイル属性
</em>

HTML要素にクラスを追加し、CSSでイタリック体や斜体表示を設定することも可能です。以下は、pタグに「p1」というクラスを追加し、イタリック体と斜体を適用する例です。

【イタリック体と斜体を適用する記述例】

<style>
　.p1 {
　 font-style: italic;
 }
</style>
<p class="p1">ABC</p>

【斜体】

<style>
　.p1 {
　 font-style: oblique;
 }
</style>
<p class="p1">EFG</p>

これらの方法を利用することで、emタグのテキストや他のHTML要素のスタイリングを柔軟にコントロールできます。ただし、emタグのセマンティックな意味を考慮して、適切なコンテキストで使用することが重要です。

今回は、emタグの概要から類似するタグとの違い、SEO効果はあるのかや、CSSでemタグの装飾を変えるケースについて解説しました。特定のテキストにemタグを使用することで、テキストがブラウザ上で斜体表示される他、検索エンジンに対して、指定したテキストの意味を強調することができます。

テキストを強調する際に利用することが多い「strongタグ」や「bタグ」とは、効果や目的が異なります。また、斜体表示することが目的の場合、emタグではなく「iタグ」を使用します。

この記事で解説した違いを理解し、適切にemタグを使用しましょう。