【HTML】i要素の使い方【慣用句、技術用語、感情などを他のテキストと区別します】

i要素を使えば、慣用句、技術用語、感情などを表すことができます。

以下のプログラムと、ブラウザの表示結果を見てください。

<body>
    <p>彼女は普段からおしゃべりで、本当に<i>口が軽い</i>。</p>
</body>

body要素の中に、「文のかたまり（段落）」を示すp要素があります。

p要素の中には、「彼女は普段からおしゃべりで、本当に口が軽い。」と書かれた文章があります。

そして、慣用句である「口が軽い」というフレーズは、i要素でマークアップされています。

このためブラウザの表示結果の通り、「口が軽い」は斜め文字のように表示されています。

つまり、この「斜め文字」のように表示された状態が、「慣用句等のフレーズである」ことを示してます。

では、英語（英文）について、i要素でマークアップしてみましょう。

<body>
    <p>彼女は普段からおしゃべりで、本当に<i>口が軽い</i>。</p>
    <p>She is usually chatty and really <i>light-mouthed</i>.</p>
</body>

先ほどのプログラムに、更にもう一行英文を追加しました。

追加した英文では、「light-mouthed」についてi要素でマークアップしてあります。

そして、ブラウザの表示結果の通り「light-mouthed」が斜め文字のように表示されています。

さらに数字について、i要素でマークアップを行いました。

<body>
    <p>仕事終わりのビールは、<i>五臓六腑</i>に染み渡る。</p>
    <p>仕事終わりのビールは、<i>５臓６腑</i>に染み渡る。</p>
    <p>仕事終わりのビールは、<i>5臓6腑</i>に染み渡る。</p>
</body>

新たな文章では、「五臓六腑」、「５臓６腑」、「5臓6腑」について、i要素でマークアップしてあります。

そして、ブラウザの表示結果の通り、全角数字（漢数字及び算用数字）、半角数字について、斜め文字のように表示することができました。

カタカナについても、i要素でマークアップを行いました。

<body>
    <p>最近のコンピュータウィルスは、<i>トロイの木馬</i>として侵入することが多い。</p>
    <p>最近のコンピュータウィルスは、<i>ﾄﾛｲの木馬</i>として侵入することが多い。</p>
</body>

新しい文章では、「トロイの木馬」と「ﾄﾛｲの木馬」について、i要素でマークアップしてあります。

そして、ブラウザの表示結果の通り、全角カタカナ、半角カタカナについて、斜め文字のように表示することができました。

i要素が属するカテゴリーは、パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツになります。

パルパブル・コンテンツに属する要素は、その要素の中にhidden属性が指定されていない要素を１つ以上含める必要があります。

また、フロー・コンテンツに属する要素は、body要素の中に記述される必要があります。フレージング・コンテンツに属する要素は、テキストをマークアップするために記述される必要があります。

つまり、i要素は、以下のプログラムに示す通り、body要素の中においてテキストをマークアップするために記述され、i要素の中にhidden属性が指定されていない要素を１つ以上含めるように記述する必要があります。

<body>
    <p>動画の縦と横の比率を<i>アスペクト比</i>といいます。</p>
</body>

上のプログラムに示す通り、i要素は、body要素の中において、マークアップしたテキストを「他のテキストと区別された状態」とするために用いることが求められます。

また、プログラムに示す通り、i要素にhidden属性を指定することなく、i要素の内容「アスペクト比」をブラウザに表示された状態とする必要があります。

i要素のコンテンツ・モデルは、フレージング・コンテンツです。

フレージング・コンテンツに属する要素は、文章内のテキストをマークアップするための要素です。そして、ブラウザに表示される「テキスト」も、フレージング・コンテンツに属する要素と同じように扱うことができます。

つまり、コンテンツ・モデルをフレージング・コンテンツとする要素（例えばi要素）は、その要素の中にフレージング・コンテンツに属する要素またはテキストを含めるように記述する必要があります。

つまり、i要素は、以下のプログラムに示す通り、i要素の中にフレージング・コンテンツに属する要素（例えばb要素）を含めるように記述する必要があります。

<body>
    <p>大変な仕事がようやく終わったので、歌舞伎町で<i><b>羽を伸ばす</b></i>ことにした。</p>   
</body>

上に示したプログラムでは、p要素でマークアップされた文章の中で、「羽を伸ばす」のフレーズがi要素でマークアップされています。そして、i要素でマークアップされた「羽を伸ばす」のフレーズについて、さらにb要素でマークアップされています。

このため、ブラウザの表示結果の通り、「羽を伸ばす」のフレーズが斜め文字の状態として表示され、さらに太字の状態（他のテキストと区別した状態）で表示することができています。

i要素について、主要なブラウザにおけるサポート状況は、以下の通りです。

	Google Chrome	Microsoft Edge	Safari	Firefox	Opera
【i要素】	○	○	○	○	○

〇：サポートあり、△：制限あり、×：サポートなし、？：不明

以上、i要素の使い方について、ご参考になさってください。