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