【HTML Living Standard】em要素の使い方

em要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月25日

基本的な使い方

emオブジェクトは、コンテンツ内で強調されたテキストブロックを表すオブジェクトです。em要素は、周囲のテキストと比較して、特定のフレーズや単語が強調されていることを示します。これは単に視覚的なスタイルを適用するだけでなく、内容の意味的な重要性を伝達することを目的としています。例えば、文章の中で特に伝えたいキーワードや、感情的なニュアンスを含んだ言葉などに使用されます。

em要素は、視覚的には通常、ブラウザによって斜体で表示されますが、これはデフォルトのスタイルシートによるものであり、CSSを使用して変更することも可能です。重要なのは、em要素がテキストの意味的な強調を持つ点です。類似の視覚効果を持つi（斜体）要素とは異なり、i要素が慣用的な理由（例えば、外国語の単語や技術用語など）でテキストを傾けるのに対し、em要素は内容の強調という明確なセマンティックな目的を持っています。

この意味的な強調は、アクセシビリティの観点からも重要です。スクリーンリーダーのような支援技術は、em要素でマークアップされたコンテンツを適切に解釈し、ユーザーにその部分が強調されていることを伝えます。これにより、視覚に頼らずとも、コンテンツの作者が意図した強調が明確に伝わり、情報の理解を深めることができます。em要素を適切に使用することで、ウェブコンテンツのセマンティクスとアクセシビリティが向上します。

公式リファレンス: : The Emphasis element

構文(syntax)


1<em>強調されたテキスト</em>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTMLのem要素でテキストを強調する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>em要素のサンプルコード</title>
6</head>
7<body>
8    <!-- em要素はテキストの一部を強調する際に使用します。 -->
9    <!-- 通常はブラウザによってイタリック体で表示されますが、そのセマンティックな意味は「強調」です。 -->
10    <p>
11        この文の<em>重要な部分</em>を強調したいです。
12    </p>
13    <p>
14        HTMLの文書では、ある特定の単語やフレーズに<em>アクセント</em>を置きたい場合によく利用されます。
15    </p>
16</body>
17</html>

HTMLの要素は、Webページ内のテキストの一部を「強調」するために使用される要素です。その名前は「emphasis」（強調）に由来しています。

この要素の主な役割は、文書の特定の部分に意味的な重要性やアクセントを与えることです。ブラウザで表示される際には、多くの場合、テキストが斜体（イタリック体）で表示されますが、これはあくまで視覚的な表現であり、要素の本質的な意味は「この部分が重要である」ということを明確にすることです。例えば、サンプルコードのように「この文の重要な部分を強調したいです」とすることで、特定の単語やフレーズに注目させたい場合に利用します。

要素には、要素に直接指定する引数（属性）はありません。また、何らかの処理結果として特定の値を返す「戻り値」もありません。HTMLの要素は、文書の構造や意味を定義することが主な役割であり、プログラミング言語における引数や戻り値を持つ関数とは性質が異なります。

システムエンジニアとしてWebページを構築する際、単に見た目を斜体にしたいだけであればCSSで対応することも可能ですが、その箇所が「意味的に強調されている」ことを伝えたい場合には、この要素を適切に使うことが推奨されます。これにより、スクリーンリーダーなどの補助技術を利用するユーザーにも、文書の意図が正しく伝わります。

要素は、テキストの中で特定の単語やフレーズにアクセントを置き、その部分を「強調」する意味合いを持つセマンティックな要素です。ブラウザのデフォルト表示でイタリック体になりますが、これはあくまで見た目であり、見た目をイタリックにしたいだけで要素を使用するのは適切ではありません。見た目の変更はCSSで行うべきです。

混同しやすい要素もイタリック体表示ですが、こちらは特に意味を持たない、または専門用語など別のテキストを指す際に使われます。HTMLでは、意味を正確に伝える要素を適切に使うことが重要です。これにより、検索エンジンや画面読み上げソフトにとっても理解しやすく、保守性の高いコードに繋がります。要素のセマンティックな役割を理解し、正しく使い分けましょう。

em要素で絵文字を強調する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>em要素と絵文字のサンプル</title>
7</head>
8<body>
9    <!-- em要素はテキストの強調（意味的な重要性）を示します -->
10    <!-- 絵文字を含むテキストをem要素で囲むことで、その部分を強調できます -->
11    <p>今日の天気は<em>☀️</em>です。</p>
12    <p>私は<em>🍣</em>が大好きです。</p>
13    <p>プロジェクトは<em>無事完了しました 🎉</em>。</p>
14</body>
15</html>

要素はHTMLにおいて、テキストの「強調」を示すために使用されます。これは、単に文字を斜体にするといった見た目の変更だけでなく、そのテキストが文章の中で意味的に重要であることを明確に伝える役割を持ちます。

この要素は、引数（要素に渡されるデータ）や戻り値（要素が処理後に返す値）を持ちません。特定の情報を処理したり、計算結果を返したりするプログラミング関数とは異なり、要素は、開始タグと終了タグで囲まれたコンテンツに「強調」という意味的な属性を付与するシンプルな役割を果たします。

サンプルコードでは、絵文字を含むテキストに要素が適用されています。例えば、「今日の天気は☀️です。」という記述では、「☀️」という絵文字が、今日の天気を具体的に示す重要な情報として強調されています。同様に、「私は🍣が大好きです。」では「🍣」が、そして「プロジェクトは無事完了しました 🎉。」では、成功した状況とその喜びが絵文字とともに強調されています。このように、要素を使うことで、ウェブページの訪問者に対して、特定の語句や絵文字、あるいはフレーズが特に注目すべき点であると伝えることができます。これにより、コンテンツの意図がより正確に伝わり、可読性やアクセシビリティの向上にも繋がります。

要素は、単にテキストを斜体にする見た目の強調ではなく、コンテンツの意味的な重要性を示すものです。これにより、ブラウザや検索エンジン、音声読み上げソフトにその部分が重要だと伝わります。

絵文字をで囲むことで、絵文字自体が持つ情報や感情のニュアンスを強調し、視覚的な注目を集めることができます。

絵文字をWebページで正しく表示するためには、HTMLファイルの<head>内で<meta charset="UTF-8">を必ず指定してください。この設定がないと、絵文字が文字化けする可能性があります。

ただし、絵文字のデザインは閲覧者のOSやブラウザ、フォントに依存するため、すべての環境で全く同じ見た目になるとは限りません。

単にテキストを斜体にしたいだけで、意味的な強調が必要ない場合は、CSSのfont-style: italic;プロパティを使用するか、要素の利用を検討してください。要素は意味に基づいて適切に使い分けることが重要です。