emタグ -文章の中で特に強調したい部分を示す｜HTML辞典
<em>タグとは？
<em>タグは、HTML文書内で「文章の中で特に強調したい部分」を示すためのタグです。
デフォルトではイタリック（斜体）で表示 されますが、単なる装飾ではなく、音声読み上げやSEOにも影響を与える「意味的な強調」 を持つことが特徴です。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）
インライン要素として扱われ、テキストの一部分を強調する役割を持ちます。
閉じタグの有無
<em>は開始タグ（<em>）と閉じタグ（</em>）の両方が必要です。
基本的な記述方法
<em> を使用すると、テキストが視覚的に斜体になり、検索エンジンにも「強調された単語」として認識されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>emタグの例</title>
</head>
<body>
<p>この文章の中で、<em>特に強調したい部分</em> を表現します。</p>
</body>
</html>ポイント：
<em>は視覚的な強調（斜体）だけでなく、音声読み上げやSEOにも影響を与える。- 文章内の「特に伝えたい部分」に使用するのが適切。
使用できる主な属性
<em>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <em class="highlight">重要</em> |
id | 一意の識別子を設定 | <em id="emphasized-text">強調</em> |
style | インラインスタイルを適用 | <em style="color: red;">赤い斜体</em> |
<em> と <i> の違い
| タグ | 役割 | 視覚的な変化 | 意味の強調 |
|---|---|---|---|
<em> | 文章内で重要な部分を強調 | 斜体（デフォルト） | あり（SEOに影響） |
<i> | 装飾目的の斜体 | 斜体（デフォルト） | なし |
✅ 例：意味的な強調としての使用（<em>）
<p>この商品は <em>数量限定</em> です。</p>- 「数量限定」が重要なポイントであることを示す。
- 検索エンジンにも「強調されたキーワード」として認識される。
✅ 例：装飾としての使用（<i>）
<p><i>ラテン語の単語</i> は斜体で表記されることが多い。</p>- 単なる視覚的な斜体（デザイン目的）。
- 検索エンジンには特に意味を持たない。
使用上の注意点
✅ 本当に強調したい部分にのみ使用する
<em>を多用すると、文章の流れが不自然になり、SEO的にも過剰な強調とみなされる可能性がある。
✅ 装飾目的なら <i> や CSS を使う
- 単なる斜体の装飾なら
<i>を使うか、CSS でfont-style: italic;を適用するのが適切。
.italic-text {
font-style: italic;
color: gray;
}<p class="italic-text">これは装飾のための斜体です。</p>関連タグ
まとめ
<em>タグは、文章の中で特に強調したい部分を示すためのタグ です。
SEOにも影響を与えるため、本当に強調すべき箇所にのみ使用することが推奨されます。
単なる装飾目的の場合は <i> や CSS を使用し、適切に使い分けることが重要です。
