HTMLの<em>は、文章の一部分へ発話上の強勢を加える要素です。ブラウザでは斜体に見えることが多いため、「文字を斜体にするタグ」と覚えている方もいるかもしれません。
しかし、emの目的は見た目ではありません。「この言葉を強く読むと文の意味やニュアンスが変わる」と示すことです。
この記事では、emタグの正しい書き方を実例で確認し、strong、i、b、markとの違いを整理します。名前が同じCSS単位のemについても初心者向けに解説します。
HTMLのemタグとは
emはemphasisの略で、周囲の言葉と比べて強く発音する部分を表します。開始タグ<em>と終了タグ</em>で、強勢を置きたい語句を囲みます。
<p>このボタンは<em>今すぐ</em>押してください。</p>この例では、「いつ押すのか」という点で今すぐを強調しています。単に目立たせるのではなく、読み方によって文の意図をはっきりさせています。
強調する場所で文のニュアンスが変わる
同じ文章でも、emで囲む場所を変えると暗に対比する内容が変わります。
<p><em>私が</em>明日行きます。</p>
<p>私は<em>明日</em>行きます。</p>1行目は「ほかの人ではなく私が」、2行目は「ほかの日ではなく明日」という対比を感じさせます。このように、emは文の意味に関わる強勢を示します。
emタグは斜体にするためのタグではない
多くのブラウザは、em要素を既定で斜体表示します。ただし、斜体はブラウザの標準CSSによる見た目であり、em要素の意味そのものではありません。
装飾目的で文字を斜体にしたいだけなら、HTMLの意味を変えず、CSSのfont-styleを使います。
<p class="italic-text">装飾として斜体にする文章</p>.italic-text {
font-style: italic;
}HTMLは意味、CSSは見た目を担当すると考えると使い分けやすくなります。斜体をやめても強勢の意味を残したい部分には、emを使ったままCSSだけ変更できます。
日本語では斜体の見え方が変わる
日本語フォントには専用の斜体字形がないことがあり、ブラウザや端末によって傾き方が異なります。ほとんど変化しない場合や、機械的に傾けた字形になる場合もあります。
そのため、「斜体に見えるから強調が伝わる」とは考えないでください。文章の言い方、見出し、色や太さなども含め、意図が理解できる表現にします。
emタグの見た目をCSSで変更する
em要素はCSSで自由に装飾できます。次の例では斜体を解除し、背景色と太字で強勢部分を見分けやすくします。
em {
padding-inline: 0.2em;
color: #b91c1c;
background-color: #fef3c7;
font-style: normal;
font-weight: 700;
}見た目を変えても、HTML上の「発話上の強勢」という意味は残ります。サイト全体で同じ見た目にするなら、外部CSSへまとめて指定しましょう。
CSSファイルの作り方や読み込み方から確認したい方は、次の記事を参考にしてください。
em・strong・i・b・markの違い
文章の一部を目立たせるHTML要素には複数あります。既定の見た目が似ていても、表す意味は同じではありません。
| 要素 | 表す意味 | 使用例 | 一般的な既定表示 |
|---|---|---|---|
em | 発話上の強勢 | 対比したい語、強く読む語 | 斜体 |
strong | 重要性、深刻さ、緊急性 | 警告、重要な注意 | 太字 |
i | 通常の文章とは異なる声・気分・用語 | 専門用語、外国語、心の声 | 斜体 |
b | 特別な重要性を加えず注意を引く | 概要内のキーワード、商品名 | 太字 |
mark | 現在の文脈における関連性 | 検索結果の一致箇所 | 黄色系の背景 |
emは強く読む場所を表す
emは、文章を声に出したときに強く読む場所を表します。どの語を強く読むかで、対比や含みが変わる場合に使います。
<p><em>保存してから</em>画面を閉じてください。</p>strongは重要性や緊急性を表す
strongは、内容の重要性、深刻さ、緊急性を示します。読み方の対比より、「見落としてはいけない情報」であることが中心です。
<p><strong>送信後は取り消せません。</strong></p>同じ文章の中で、重要な注意全体をstrongにし、その中の特定の語へemで強勢を加えることもできます。
<p>
<strong><em>必ず</em>バックアップを取ってください。</strong>
</p>iは別の声や用語を区別する
iは、通常の文章とは異なる声や気分、専門用語、慣用句、外国語などを区別します。単に斜体にする目的ではなく、周囲と性質が異なる語句であることを示します。
<p>
<i lang="en">responsive design</i>は、画面幅に応じて表示を調整する設計です。
</p>外国語にはlang属性を付けると、言語情報も伝えられます。作品名ならcite、用語の定義ならdfnなど、より適切な要素がないかも確認します。
bは重要性を加えず注意を引く
bは、重要性や強勢を追加せず、読者の注意を引きたい語句に使います。概要内のキーワードやレビュー中の商品名などが例です。
<p>
今回比較するのは<b class="product-name">入門プラン</b>と通常プランです。
</p>装飾として太字にしたいだけなら、bではなくCSSのfont-weightを使います。
markは文脈上関連する箇所を示す
markは、現在の文脈で関連性が高い部分を示します。検索した語と一致する部分や、引用文の中で今注目している箇所などに向いています。
<p>
「HTML <mark>em</mark>」の検索結果です。
</p>強調したいからmarkを使うのではなく、検索や説明の文脈で関連するから使う点が違います。
HTMLで文字を強調する方法をまとめて比較したい方は、次の記事も参考にしてください。
emタグを入れ子にすると強勢が強くなる
em要素は入れ子にできます。仕様上は、入れ子が深くなるほど強勢の度合いが高くなります。
<p>
<em>これは<em>本当に</em>必要な確認です。</em>
</p>ただし、入れ子を増やしてもブラウザの見た目が段階的に変わるとは限りません。重要度を視覚的に区別したい場合は、クラスとCSSを併用します。
HTMLのemとCSS単位のemは別物
HTML要素の<em>と、CSSで使う長さの単位emは、名前が同じでも別のものです。
| 種類 | 書く場所 | 役割 |
|---|---|---|
HTMLの<em> | HTMLファイル | 文中の発話上の強勢を表す |
CSS単位のem | CSSの値 | 文字サイズを基準に長さを表す |
font-sizeに使うemは親要素が基準
font-sizeへemを指定した場合は、親要素の文字サイズを基準に計算します。
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em;
}この例の1.5emは、親要素の16pxを基準にして24pxになります。
paddingなどに使うemは要素自身の文字サイズが基準
paddingやmarginなどへemを使う場合は、原則としてその要素自身の計算後の文字サイズが基準です。
.button {
font-size: 20px;
padding: 0.5em 1em;
}上下の余白は10px、左右の余白は20pxになります。文字サイズを変えると余白も比例して変わるため、ボタンのような部品で便利です。
ほかのCSSプロパティや単位も試したい方は、コード例をまとめた次の記事へ進んでください。
emタグとSEOの関係
emを使っただけで検索順位が上がる、キーワードをemで囲むとSEOに有利になる、と断定できるものではありません。検索順位を目的に、文章中のキーワードへ機械的にemを付けるのは避けましょう。
emを含む意味に合ったHTMLは、文章構造を理解しやすくし、保守性やアクセシビリティの改善につながります。SEO対策というより、読者へ正確な意味を届けるために使うのが基本です。
アクセシビリティで注意すること
HTMLの意味を正しく付けることは大切ですが、支援技術がemをどのように読み上げるかは環境によって異なります。重要な操作や警告を、emだけに頼って伝えないでください。
- 重要な情報は、文章そのものでも明確に書く
- 斜体だけで状態や違いを表さない
- 色を加える場合も、色だけに意味を持たせない
- 長い段落全体をemで囲まず、必要な語句だけに使う
- 日本語フォントやスマートフォンでも読みやすいか確認する
長い斜体文は読みづらくなることがあります。強勢を示す語句は短く保ち、必要に応じてCSSで斜体を解除します。
emタグでよくある質問
emタグは非推奨・廃止ですか？
廃止されていません。発話上の強勢を表すための現行HTML要素です。斜体装飾だけを目的に使わないことが重要です。
emタグとstrongタグはどちらを使えばよいですか？
強く読む場所を示して対比やニュアンスを変えるならem、重要性・深刻さ・緊急性を示すならstrongを使います。見た目が斜体か太字かではなく、文章上の役割で選びます。
太字と斜体を同時にしたい場合はどうしますか？
意味が強勢ならemを使い、見た目はCSSで太字と斜体にできます。太字にしたいという理由だけでstrongを追加すると、不要な重要性まで付いてしまいます。
em {
font-style: italic;
font-weight: 700;
}文章の一部を装飾するだけなら何を使いますか？
強勢、重要性、用語、関連性といった意味がないなら、spanへclassを付けてCSSで装飾します。
<p>文字の<span class="accent">色だけ</span>を変えます。</p>HTMLタグの選び方を広く確認したい方は、基本タグをまとめた次の記事も見てください。
emタグの使い方まとめ
emは、文章中の語句へ発話上の強勢を加えるHTML要素- 斜体は一般的な既定表示であり、装飾だけならCSSを使う
strongは重要性、iは別の声や用語、markは関連性を表す- emは入れ子にでき、深い入れ子ほど強勢の度合いが上がる
- HTML要素のemとCSS単位のemは別物
- SEO目的でキーワードへ機械的に付けず、文章の意味に合わせて使う
まずは「私が明日行きます」の例で、囲む語を変えたときのニュアンスを声に出して比べてみてください。見た目ではなく、どこを強く読むかで選ぶとemの役割が分かります。
仕様を詳しく確認するときは、MDNのem要素、strong要素、i要素、b要素、mark要素、CSSの長さ、WHATWGのHTML Standardも参考になります。