
i要素を使えば、慣用句、技術用語、感情などを表すことができます。
i要素の基本的な使い方
はじめに、以下のプログラムと、ブラウザでの表示結果を見てください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i要素</title>
</head>
<body>
<p>彼女は普段からおしゃべりで、本当に<i>口が軽い</i>。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。
p要素の中には、「彼女は普段からおしゃべりで、本当に口が軽い。」と書かれた文章があります。
そして、慣用句である「口が軽い」というフレーズは、i要素でマークアップされています。
このため、ブラウザでの表示結果の通り、「口が軽い」は、斜め文字のように表示されています。
つまり、この「斜め文字」のように表示された状態が、「慣用句等のフレーズである」ことを示してます。
英語(英文)ではどうなる?
では、英語(英文)について、i要素でマークアップしてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i要素</title>
</head>
<body>
<p>彼女は普段からおしゃべりで、本当に<i>口が軽い</i>。</p>
<p>She is usually chatty and really <i>light-mouthed</i>.</p>
</body>
</html>

先ほどのプログラムに、更にもう一行、英文を追加しました。
追加した英文では、「light-mouthed」について、i要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、「light-mouthed」が斜め文字のように表示されています。
i要素は、数字に対してマークアップが可能なのか?
さらに、数字について、i要素でマークアップを行いました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i要素</title>
</head>
<body>
<p>仕事終わりのビールは、<i>五臓六腑</i>に染み渡る。</p>
<p>仕事終わりのビールは、<i>5臓6腑</i>に染み渡る。</p>
<p>仕事終わりのビールは、<i>5臓6腑</i>に染み渡る。</p>
</body>
</html>

新たな文章では、「五臓六腑」、「5臓6腑」、「5臓6腑」について、i要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、全角数字(漢数字及び算用数字)、半角数字共に、斜め文字のように表示することができました。
i要素は、カタカナに対してもマークアップできる?
カタカナについても、i要素でマークアップを行いました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i要素</title>
</head>
<body>
<p>最近のコンピュータウィルスは、<i>トロイの木馬</i>として侵入することが多い。</p>
<p>最近のコンピュータウィルスは、<i>トロイの木馬</i>として侵入することが多い。</p>
</body>
</html>

新しい文章では、「トロイの木馬」と「トロイの木馬」について、i要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、全角カタカナ、半角カタカナ共に、斜め文字のように表示することができました。
各種ブラウザでの表示結果
また、i要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。
【HTML】 | Internet Explorer | Google Chrome | Microsoft Edge | Safari | Firefox | Opera |
i要素 | ○ | × | ○ | ○ | ○ | × |
以上、i要素の使い方について、ご参考になさってくださいね。