HTML要素とli要素の関係【ウェブデザイン技能検定 1級学科範囲】

HTMLのリストはul（順不同リスト）やol（順序付きリスト）の中にli（リストアイテム）を配置するのが基本ですが、それ以外の要素でもliを直接の子要素として使用できる場合があります。
本記事ではHTML5仕様に基づきliを子要素として許可される要素について解説します。

li要素とは？

li要素は、リストの各アイテムを表す要素で通常は次のようなリスト要素の子として使用されます。

• ul（順不同リスト）
  順序のないリストを作成するための要素。
• ol（順序付きリスト）
  順序のあるリストを作成するための要素。

li要素を直接配置できるその他の要素

HTML5では、以下の要素にもli要素を直接配置することが許可されています。

1. menu

menu要素は、HTML5で再導入された要素でナビゲーションやコマンドのリストを表現するために使用されます。

<menu>
  <li>ホーム</li>
  <li>サービス</li>
  <li>お問い合わせ</li>
</menu>

ポイント:
menu要素は、ulやolと異なりナビゲーションメニューやコマンドリストのような特殊な用途を意識した設計となっています。

li要素を配置できない要素

divやspanといった汎用コンテナ要素にはli要素を直接配置することはできません。
これらはリスト構造をサポートする要素ではないため文法エラーとなります。

<div>
  <li>これはエラーになります</li>
</div>

menu要素とul/olの違い

見た目の違い

• menu要素は、基本的にはスタイルが適用されず、生のリストとして扱われます。
• ul/ol要素は、ブラウザによってデフォルトのスタイル（例えば、箇条書きや番号付きリスト）が適用されます。

用途の違い

• ul/ol: 一般的なリスト表示。
• menu: ナビゲーションやコマンドを表現するための特化したリスト。

実際の例

以下はmenu要素を使用したナビゲーションメニューの例です。

<menu>
  <li><a href="/">ホーム</a></li>
  <li><a href="/about">会社概要</a></li>
  <li><a href="/contact">お問い合わせ</a></li>
</menu>

スタイリングを適用すれば、ulやolとほとんど変わらないデザインを実現できます。

注意点

古いブラウザでのサポート

menu要素は一部の古いブラウザで完全にはサポートされていない場合があります。
そのため、汎用性を重視する場合はulやolの使用を検討してください。

HTMLの仕様を守る

li要素はリスト構造の一部であるため適切な親要素（ul、ol、menuなど）の中で使用する必要があります。

まとめ

HTML5ではli要素を配置できる要素としてul、ol以外にmenuが追加されています。
menu要素は特定の用途に適したリスト要素でありナビゲーションやコマンドのリストを表現する際に便利です。
正しい要素を使用することでセマンティクスに沿ったHTMLを記述しアクセシビリティやSEOの向上を図りましょう。