<i></i>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ

i要素は、他とは区別されるテキスト（思考や専門用語 等）を表します。


<i>区別されるテキストを表します</i>

i要素は、一般の文章とは質の異なるテキストを表す際に使用します。例えば、次のような内容に使用することができます。

  • 思考、誰かの声
  • 専門用語
  • 船の名前
  • 他言語によるフレーズ

次の例は、心の叫び声を表しています。（class属性でクラス名を指定しておくと、スタイルを使い分ける際に便利です）

<p>そのとき私は、<i class="voice">ついにやったぞ！</i>と心の中で叫んでいた。</p>

次の例は、専門用語を表しています。（定義を伴う用語の場合は、2つ目の段落のようにdfn要素を使用します）

<p>最近、<i class="term">アフィリエイト</i>を始めたのですが、なかなかうまく ...</p>

<p><dfn>アフィリエイト</dfn>とは、広告の成果に応じて報酬が支払われる ...</p>

次の例は、船の名前を表しています。

<p>彼らを乗せた<i class="name">タイタニック号</i>は、ニューヨークに向けて出航した。</p>

次の例は、他言語によるフレーズを表しています。（他言語の部分には、lang属性で言語コードを指定しておくと良いでしょう）

<p>残されたメモには、<i lang="en">I return to a parents' home.</i>と書かれていた。</p>
  • i要素は、他に適切な要素がない場合に使用することになります。これよりも適した要素がある場合は、そちらを使用することが推奨されています。例えば、強調を表す場合はem要素、定義用語を表す場合はdfn要素を使用します。

要素のデフォルトスタイル

一般的なブラウザでは、この要素内のテキストはイタリック体で表示されます。

  • フォントによっては、イタリック体で表示されない場合があります。
区別されるテキストを表します Italic
旧HTMLからの変更点
  • HTML5：要素の定義が変わりました。（イタリック体 → 他と区別されるテキスト）

使用例


<p>そのとき私は、<i>ついにやったぞ！</i>と心の中で叫んでいた。</p>
表示例

そのとき私は、ついにやったぞ！と心の中で叫んでいた。

スタイルを設定した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

i.voice { font-style: normal; }
i.voice::before { content: "「"; }
i.voice::after { content: "」"; }

</style>

</head>
<body>

<p>そのとき私は、<i class="voice">ついにやったぞ！</i>と心の中で叫んでいた。</p>

</body>
</html>
表示例

そのとき私は、ついにやったぞ！と心の中で叫んでいた。