catnose
catnose
HTMLの<i>タグは、周りのテキストと区別したい部分に使います（心の声、専門用語、外国語の言葉など）。
<p>僕は<i>絶対に何か裏があるはずだ！</i>と勘繰った。</p>
👆主要ブラウザのデフォルトスタイルでは<i>内のテキストは斜体で表示されます。
✍️ ポイント
「心の声や専門用語だから<i>を使うべき」というわけではありません。重要な専門用語には<strong>を使っても良いですし、カギカッコ「」を使って表現した方が分かりやすいかもしれません。
<i>を使うことによるSEO効果は期待できないため、読者にとって親切な表現を選びましょう。
iタグの使い方
他に適切なHTMLタグない場合に使用する
<i>タグは基本的に積極的に使うものではありません。他に適切なHTMLタグない場合、かつ「周りのテキストと区別したい部分」にのみ使いましょう。
例えば、次のような目的では<i>ではなく、他のタグを使います。
- 重要性を示したい👉
<strong> - 強調したい👉
<em> - 映画や本、音楽などの作品名を表したい👉
<cite>
アイコンフォントに使われることも
FontAwesomeなどのWebアイコンフォントでは、アイコン表示のために<i>タグを使っています。
<!-- FontAwesomeの読み込み -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css">
<p><i class="fas fa-calendar"></i> 日付を選択</p>
<p><i class="fas fa-cart-arrow-down"></i> カートへ</p>
「<i>はアイコンなどに使う」などというHTMLの決まりはありません。他に適切なタグが無いことと、アイコンは周りのテキストと明確に区別されるべき部分であることから慣習的に<i>が使われています。
😺これらのサービスでは、<i class="アイコンのクラス名"></i>で指定したクラスに対して、疑似要素（before）によりアイコンを表示させています。ちなみに<i>の代わりに<span>を使っても同じように表示できます。
外国語に使うときにはlangで言語を指定する
<p>それは<i lang="es">curva evolvente</i>（インボリュート曲線）と呼ばれています。</p>
👆外国語のフレーズや用語に使う場合は<i lang="○○">というようにlang属性で言語を指定しましょう。
😺ページ全体の言語は、htmlタグ内のlang属性で指定します（例：<html lang="fr">）
斜体にすることを目的に使わない
<i>内のテキストは、主要ブラウザではデフォルトで斜体文字（font-style:italic）で表示されます。
しかし単に斜体にしたいなら以下のように<span>タグを使い、CSSで斜体文字を指定しましょう。
.font-italic {
font-style: italic;
}