【HTML Living Standard】li要素の使い方
li要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
liオブジェクトは、HTMLドキュメントにおいて、順序付きリスト（<ol>）または順序なしリスト（<ul>）の個々の項目（リストアイテム）を定義するために使用されるオブジェクトです。この要素は、ウェブページ上で情報やコンテンツを構造化し、読みやすく整理された形で提示する際に非常に重要な役割を果たします。
具体的には、<ol>要素または<ul>要素の直接の子要素として配置されます。<ol>要素内で<li>が使用された場合、ブラウザは通常、各項目に自動的に番号を付与して表示します。一方、<ul>要素内で<li>が使用された場合、各項目は一般的に箇条書きの点（黒丸など）が付けられて表示されます。
また、<li>要素は、<ol>の子要素として使用される場合に限り、value属性を持つことができます。このvalue属性を使用することで、そのリストアイテムから始まる項目の番号を明示的に指定することが可能です。これにより、リストの途中で番号付けを特定の数値から再開したり、リストの順序を中断して異なる番号で開始したりするような柔軟な表示が実現できます。
<li>要素は、ナビゲーションメニューの項目、手順の説明、用語の列挙など、多様な種類のリストを表現するために広く利用されており、ウェブコンテンツのセマンティクス（意味）とアクセシビリティ（利用しやすさ）を高める上で不可欠な要素となっています。
構文(syntax)
1<li>リストアイテムのテキスト</li>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML li要素でリストを作成する
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>HTML li要素のサンプル</title> 7</head> 8<body> 9 10 <!-- 11 <li>要素は、リストの各項目（リストアイテム）を定義します。 12 通常、<ul> (順序なしリスト) または <ol> (順序付きリスト) の子要素として使用されます。 13 --> 14 15 <h1>順序なしリストの例 (unordered list)</h1> 16 <!-- <ul>要素は、項目の順序が重要ではないリストを作成します。 --> 17 <ul> 18 <li>りんご</li> 19 <li>バナナ</li> 20 <li>みかん</li> 21 </ul> 22 23 <h1>順序付きリストの例 (ordered list)</h1> 24 <!-- <ol>要素は、項目の順序が重要なリストを作成します。 --> 25 <ol> 26 <li>水を沸かす</li> 27 <li>コーヒー粉を入れる</li> 28 <li>ゆっくりお湯を注ぐ</li> 29 </ol> 30 31</body> 32</html>
HTMLの<li>要素は、ウェブページ上でリストの個々の項目（リストアイテム）を定義するために使用される要素です。この要素は単独で機能するのではなく、必ず<ul>要素（Unordered List、順序なしリスト）または<ol>要素（Ordered List、順序付きリスト）の子要素として配置されます。
サンプルコードの最初の例では、<h1>見出しの下に順序なしリストが示されています。<ul>タグの内部に「りんご」「バナナ」「みかん」といった複数の<li>要素が配置されており、これらの項目の順序は特に重要ではありません。ブラウザでは通常、各<li>の前に記号（点など）が表示され、箇条書きのように表現されます。
次の例は順序付きリストです。<ol>タグの内部に「水を沸かす」「コーヒー粉を入れる」といった<li>要素が並べられています。ここでは、コーヒーを淹れる手順のように、項目の順序が重要な意味を持ちます。ブラウザでは通常、各<li>の前に番号が自動的に付与され、手順を追って表示されます。
<li>要素自体は、特定の引数を受け取って挙動を変えたり、何らかの処理結果を返す戻り値を持ったりする機能はありません。これは、<li>が主にコンテンツの構造を定義するマークアップの役割を担っているためです。
<li>要素は、リストの各項目を定義する際に用いられますが、必ず<ul>（順序なしリスト）または<ol>（順序付きリスト）の直接の子要素として使用してください。単独で使用したり、これら以外の要素の子要素として配置したりすると、HTMLの構造が不正となり、ブラウザでの表示が意図せず崩れたり、スクリーンリーダーなどの補助技術で内容が正しく解釈されなくなったりする可能性があります。また、<ul>は項目の順序が重要でない場合に、<ol>は順序が重要な場合に使用するという意味的な違いを理解し、適切に使い分けることが重要です。これにより、コードの可読性や検索エンジンからの評価も向上します。HTMLはLiving Standardとして常に進化していますので、最新の仕様を確認する習慣も身につけましょう。
HTMLリストでリンクを作成する
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>リスト内のリンクの例</title> 6</head> 7<body> 8 <h1>Web開発学習リソース</h1> 9 <!-- ul要素は順序なしリスト（Unordered List）を作成します --> 10 <ul> 11 <!-- li要素はリストの各アイテム（List Item）を表します --> 12 <li> 13 <!-- a要素はハイパーリンク（Anchor）を作成し、href属性でリンク先を指定します --> 14 <a href="https://developer.mozilla.org/ja/docs/Web/HTML" target="_blank">MDN Web Docs: HTML</a> 15 </li> 16 <li> 17 <a href="https://www.w3.org/standards/webdesign/htmlcss" target="_blank">W3C HTML & CSS Standards</a> 18 </li> 19 <li> 20 <a href="https://ja.wikipedia.org/wiki/HTML" target="_blank">Wikipedia: HTML</a> 21 </li> 22 </ul> 23</body> 24</html>
HTMLの<li>要素は、リストの個々の項目（リストアイテム）を定義するために使用されます。この要素は通常、順序なしリストを作成する<ul>要素、または順序付きリストを作成する<ol>要素の子要素として配置されます。例えば、ウェブサイトのナビゲーションメニューや、箇条書きで情報を整理する際によく利用されます。
<li>要素自体には、特定のデータを受け取る「引数」や、処理結果を返す「戻り値」はありません。これは、<li>がプログラムのように機能するのではなく、コンテンツの構造を定義するマークアップ要素であるためです。単にその中身をリストの項目として表示する役割を果たします。
提供されたサンプルコードでは、<h1>タグで「Web開発学習リソース」という見出しが付けられ、その下に<ul>（順序なしリスト）が作成されています。この<ul>の中に複数の<li>要素が配置されており、それぞれの<li>がリストの各項目となっています。さらに、各<li>要素の中には<a>要素（ハイパーリンク）が含まれており、これによりリストの各項目が外部のWebページへのリンクとして機能しています。target="_blank"属性は、リンクをクリックした際に新しいタブでページが開くように指定しています。ユーザーはこのリストを通じて、関連する学習リソースへ簡単にアクセスできるようになっています。このように<li>要素は、Webページ上で情報を整理し、ユーザーにとって分かりやすい構造を提供する上で重要な役割を担っています。
li要素は、必ずul（順序なしリスト）やol（順序付きリスト）の子要素として使われるリストの各項目を意味します。単独で配置してもブラウザは表示しますが、HTMLの構造的な意味付けとしては推奨されません。liの中にはテキストだけでなく、今回のサンプルコードのようにa要素（ハイパーリンク）をはじめとする様々なHTML要素を含めることができます。a要素のhref属性は、リンク先のURLを正確に記述してください。特に、https://のようなプロトコルを忘れずに含めることが重要です。また、target="_blank"で新しいタブを開く際は、元のページを保護するため、セキュリティ上の推奨事項としてrel="noopener noreferrer"属性を必ず追加するようにしてください。これは、リンク先のページが悪意のある動作をしないよう防ぐ役割があります。