Wie erstellt man eine verschachtelte HTML-Liste?

Question

Die W3-Dokumente haben eine Beispiel für eine verschachtelte Liste mit dem Präfix DEPRECATED EXAMPLE: aber sie haben es weder mit einem nicht veralteten Beispiel korrigiert, noch erklärt, was genau an dem Beispiel falsch ist.

Welche dieser Möglichkeiten ist also die richtige Art, eine HTML-Liste zu schreiben?

Option 1 : die verschachtelte <ul> ist ein Kind des Elternteils <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>

Option 2 : die verschachtelte <ul> ist ein Kind der <li> es gehört in

<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>

Answer 1

Haben Sie darüber nachgedacht, den TAG "dt" anstelle von "ul" für verschachtelte Listen zu verwenden? Dank seines Stils und seiner Struktur können Sie für jeden Abschnitt einen Titel verwenden, und der Inhalt wird automatisch in Tabellenform dargestellt.

<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>

Answer 2

Was hier nicht erwähnt wird, ist, dass Option 1 eine beliebig tiefe Verschachtelung von Listen erlaubt.

Dies sollte keine Rolle spielen, wenn Sie den Inhalt/Css kontrollieren, aber wenn Sie einen Rich-Text-Editor erstellen, ist dies sehr nützlich.

Mit Google Mail, Inbox und Evernote können Sie beispielsweise solche Listen erstellen:

Bei Option 2 ist das nicht möglich (Sie haben dann einen zusätzlichen Listeneintrag), bei Option 1 hingegen schon.