【HTML Living Standard】i要素の使い方
i要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
<i>要素は、コンテンツの他の部分とは異なる種類のテキストを表現するために使用されるHTML要素です。この要素は、そのコンテンツが通常のテキストとは異なる雰囲気、音声、あるいは分類を持つことを示します。具体的には、技術用語、専門用語、外国語のフレーズ、思考、船の名前、あるいは特定の文字や単語自体に言及する際などに適しています。
重要な点として、<i>要素は単にテキストを斜体（イタリック体）にするための視覚的な目的で使用されるべきではありません。純粋に視覚的なスタイルのみを目的とする場合は、CSSのfont-styleプロパティをitalicに設定するのが適切です。<i>要素が持つべきは、そのテキストがコンテンツ全体の流れの中で特別な意味合いを持っているというセマンティックな役割です。
例えば、「新しい発見を伝える際に、生物の学名を<i>Homo sapiens</i>と表記する」といった文脈で使用されます。これは強調を表す<em>要素や、作品のタイトルを表す<cite>要素とは異なり、テキストが持つ「別種の区別」に焦点を当てています。HTML Living Standardでは、この意味的な区別がより明確に定義され、ウェブアクセシビリティや検索エンジンの理解においても重要な役割を果たします。
構文(syntax)
1<i>テキスト</i>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLでi要素とinput要素の使い分け
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>i要素とinput要素のサンプル</title> 7</head> 8<body> 9 <h1>プロフィール設定</h1> 10 11 <form action="#" method="post"> 12 <label for="username">ユーザー名:</label> 13 <input type="text" id="username" name="username" required> 14 <!-- i要素は、テキストの一部を他のテキストと区別して表現する場合に使用されます。 --> 15 <!-- ここでは、入力フィールドに関する補足情報を斜体で表示しています。 --> 16 <i>半角英数字3文字以上16文字以内</i><br><br> 17 18 <label for="email">メールアドレス:</label> 19 <input type="email" id="email" name="email" required> 20 <i>有効なメールアドレス形式で入力してください。</i><br><br> 21 22 <button type="submit">保存</button> 23 </form> 24</body> 25</html>
HTMLの<i>要素は、テキストの一部を他のテキストとは異なる表現で区別したい場合に使用される要素です。具体的には、特別な意味合いを持つ単語やフレーズ、例えば専門用語、思考、船の名前、別の言語の単語など、通常のテキストとは区別して注意を引きたい部分をマークアップします。この要素で囲まれたテキストは、多くのブラウザでデフォルトで斜体（イタリック体）で表示されますが、その本質はスタイルではなく、テキストが持つ「意味的な区違い」を示すことにあります。
この<i>要素には、特定の引数（属性）や戻り値はありません。そのため、テキストを囲むだけで機能し、プログラミングにおける引数の指定や、処理結果として何らかの値を返すことはありません。
サンプルコードでは、ユーザー登録フォーム内のinput要素に対して、入力に関する補足情報や制約を伝えるために<i>要素が利用されています。「ユーザー名」の入力フィールドの下に「半角英数字3文字以上16文字以内」と、また「メールアドレス」の入力フィールドの下に「有効なメールアドレス形式で入力してください。」という注意書きを、それぞれ<i>要素で囲んでいます。これにより、補足情報がフォームの他のテキストとは異なる種類であることを視覚的に示し、ユーザーにとって分かりやすい画面を構築しています。<i>要素は、純粋な装飾目的ではなく、テキストが持つ文脈上の特別な意味合いを表現する際に活用されます。
HTMLの<i>要素は、単に文字を斜体にするためではなく、テキストの一部を他のテキストと区別して示す意味で使われます。見た目の装飾が目的ならCSSを使用してください。input要素では、type属性で入力データの種類（テキスト、メールアドレスなど）を正しく指定することが重要です。id属性はlabel要素との関連付けやJavaScriptからの操作に、name属性はフォーム送信時にデータを識別するために必須となります。required属性で入力必須にできますが、安全のため、サーバー側でも必ず入力値の検証を行ってください。label要素とinput要素をforとidで関連付けることで、ユーザーの操作性やアクセシビリティが向上しますので、常に実施することをおすすめします。
HTMLで画像とi要素を表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>画像とi要素のサンプル</title> 7</head> 8<body> 9 <h1>画像の表示と説明</h1> 10 11 <!-- <img>要素を使用して画像を表示し、<figure>と<figcaption>で説明を付与 --> 12 <figure> 13 <img src="https://via.placeholder.com/300x200?text=Sample+Image" alt="サンプル画像：山と湖"> 14 <figcaption> 15 これは美しい山と湖の風景です。 16 <!-- <i>要素で、主要なキャプションとは異なる性質のテキスト（例: 出典情報）を示す --> 17 <i>(画像提供: サンプルギャラリー)</i> 18 </figcaption> 19 </figure> 20 21 <p> 22 上記の画像は、プレースホルダーサービスから取得したものです。 23 ウェブサイトで実際に画像を使用する際は、適切な画像ファイルを指定してください。 24 </p> 25</body> 26</html>
HTMLの<i>要素は、HTML Living Standardにおいて、主要なテキストとは異なる性質を持つテキストを示すための要素です。例えば、技術用語、外国語の単語、書名、または特定の文脈で区別されるべきテキストなどに用いられます。かつてはテキストを単に斜体にするための要素として使われましたが、現在は見た目（スタイル）ではなく、コンテンツの意味（セマンティクス）を明確にすることに重点が置かれています。
サンプルコードでは、まず<img>要素を使ってウェブページに画像を表示しています。この画像には<figure>要素で図としてマークアップし、<figcaption>要素で画像の説明文（キャプション）を付けています。
<figcaption>内で使用されている<i>要素は、「(画像提供: サンプルギャラリー)」というテキストを囲んでいます。これは、画像の主要な説明とは別に、出典情報のような補足的な性質のテキストを意味的に区別して示す意図で使われています。これにより、ブラウザやスクリーンリーダーに「この部分は提供元情報である」という情報が伝わり、コンテンツの理解を助けます。
<i>要素は、特定の引数を取ったり、戻り値を返したりする機能はありません。これは、HTMLが文書の構造と意味を定義するマークアップ言語であり、JavaScriptのようなプログラミング言語の関数とは異なり、要素自体が動的な処理を行うわけではないためです。したがって、<i>要素は、テキストに特定の意味的な役割を与えるために使用されます。
<img>要素のsrc属性は、実際に表示したい画像の正しいファイルパスやURLに置き換えて使用します。alt属性には、画像が表示されない場合や視覚障害者向けに、画像の内容を簡潔に説明するテキストを必ず記述してください。これはアクセシビリティの確保に非常に重要です。一方、<i>要素は、単にテキストを斜体にするためではなく、専門用語、思考、出典など、主要な内容とは異なる性質を持つテキストを示すために用います。文字の見た目を斜体にする目的であれば、CSSのfont-style: italic;プロパティを使用するのが適切です。また、figureとfigcaption要素は、画像とその説明文を意味的にグループ化し、コンテンツの構造をより明確にするために活用できます。これらの要素を正しく理解し、目的に応じて使い分けることが重要です。