W3ドキュメントには、接頭辞がの付いたネストされたリストの例DEPRECATED EXAMPLE:がありますが、非推奨ではない例で修正することはなく、例の何が問題であるかを正確に説明していません。

これらの方法のうち、HTMLリストを作成する正しい方法はどれですか。

オプション1：入れ子<ul>は親の子です<ul>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

オプション2：入れ子<ul>は<li>それが属する子

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

オプション2は正しいです。

ネストされたリストは、ネストされているリストの<li>要素内にある必要があります。

リストのW3C Wikiへのリンク（以下のコメントから取得）：HTMLリストWiki。

HTML5 W3Cへのリンクul：スペックHTML5ul。そのノートul要素が正確にゼロまたはそれ以上含有することができるli要素。同じことがHTML5にolも当てはまります。説明リスト（HTML5dl）は似ていますが、dtおよびdd要素の両方を使用できます。

その他のメモ：

• dl =定義リスト。
• ol =順序付きリスト（数値）。
• ul =番号なしリスト（箇条書き）。

オプション2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

ネスティングリスト-UL

オプション2は正しい：入れ子<ul>は<li>それが属する子です。

検証した場合、オプション1はHTML 5のエラーとして表示されます-クレジット：user3272456

正しい：の<ul>子として<li>

HTMLのネストされたリストを作成する適切な方法<ul>は、<li>それが属するの子としてネストされたリストを使用することです。ネストされたリストは、ネストされているリストの<li>要素内にある必要があります。

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

ネストリストの W3C標準

リスト項目には別のリスト全体を含めることができます—これはリストの「ネスト」と呼ばれます。これは、この記事の冒頭にあるような目次などに役立ちます。

1. 第一章
   1. セクション1
   2. セクション2
   3. セクション3
2. 第二章
3. 第三章

リストをネストするための鍵は、ネストされたリストが1つの特定のリスト項目に関連している必要があることを覚えておくことです。これをコードに反映させるために、ネストされたリストはそのリスト項目内に含まれています。上記のリストのコードは次のようになります。

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

ネストされたリストが<li>とそれを含むリストアイテム（「第1章」）のテキストの後にどのように始まるかに注意してください。次に、それ</li>を含むリスト項目の前に終了します。ネストされたリストは、ウェブサイトの階層構造を定義するのに適した方法であるため、ウェブサイトのナビゲーションメニューの基礎となることがよくあります。

理論的には、リストはいくつでもネストできますが、実際にはリストを深くネストしすぎると混乱する可能性があります。非常に大きなリストの場合は、コンテンツを見出し付きのいくつかのリストに分割するか、別のページに分割することをお勧めします。

検証すると、オプション1はhtml 5のエラーとして表示されるため、オプション2が正しいです。

ネストされたリストの所有者としてリストアイテムを明確に示すため、オプション2を選択します。私は常に意味論的に健全なHTMLに頼っています。

リストのネストに「ul」ではなく「dt」というタグを使用することを考えましたか？スタイルと構造を継承しているため、セクションごとにタイトルを付けることができ、中に入るコンテンツが自動的に表形式で表示されます。

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

VS

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>

ここで触れられていないのは、オプション1では、リストを任意に深くネストできるということです。

content / cssを制御する場合は問題ありませんが、リッチテキストエディターを作成する場合に便利です。

たとえば、gmail、inbox、evernoteはすべて、次のようなリストを作成できます。

オプション2ではそれができない（追加のリストアイテムが作成されます）。オプション1ではそれが可能です。