Den W3-Dokumenten wird ein verschachteltes Listenbeispiel vorangestellt DEPRECATED EXAMPLE:, das jedoch nie mit einem nicht veralteten Beispiel korrigiert oder genau erklärt wurde, was mit dem Beispiel nicht stimmt.

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

Option 1 : Der 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 : Das verschachtelte <ul>ist ein Kind des, in das <li>es gehört

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

Option 2 ist korrekt.

Die verschachtelte Liste sollte sich in einem <li>Element der Liste befinden, in der sie verschachtelt ist.

Link zum W3C-Wiki in Listen (entnommen aus dem Kommentar unten): HTML-Listen-Wiki .

Link zur HTML5 W3C- ulSpezifikation: HTML5ul . Beachten Sie, dass ein ulElement genau null oder mehr liElemente enthalten kann. Gleiches gilt für HTML5ol . Die Beschreibungsliste ( HTML5dl ) ist ähnlich, erlaubt jedoch sowohl dtals auch ddElemente.

Weitere Hinweise:

• dl = Definitionsliste.
• ol = geordnete Liste (Nummern).
• ul = ungeordnete Liste (Aufzählungszeichen).

Option 2

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

Verschachtelungslisten - UL

Option 2 ist richtig: Das verschachtelte <ul>ist ein Kind des, in das <li>es gehört.

Wenn Sie validieren , wird Option 1 als Fehler in HTML 5 angezeigt - Kredit: user3272456

Richtig: <ul>als Kind von<li>

Die richtige Methode zum Erstellen einer verschachtelten HTML-Liste besteht darin, die verschachtelte Liste <ul>als untergeordnetes Element der Liste zu erstellen, <li>zu der sie gehört. Die verschachtelte Liste sollte sich innerhalb des <li>Elements der Liste befinden, in dem sie verschachtelt ist.

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

W3C-Standard für Verschachtelungslisten

Ein Listenelement kann eine andere vollständige Liste enthalten - dies wird als "Verschachteln" einer Liste bezeichnet. Es ist nützlich für Dinge wie Inhaltsverzeichnisse, wie das am Anfang dieses Artikels:

1. Kapitel eins
   1. Abschnitt Eins
   2. Abschnitt Zwei
   3. Abschnitt Drei
2. Kapitel Zwei
3. Kapitel drei

Der Schlüssel zum Verschachteln von Listen besteht darin, sich daran zu erinnern, dass sich die verschachtelte Liste auf ein bestimmtes Listenelement beziehen sollte. Um dies im Code widerzuspiegeln, ist die verschachtelte Liste in diesem Listenelement enthalten. Der Code für die obige Liste sieht ungefähr so ​​aus:

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

Beachten Sie, wie die verschachtelte Liste nach dem <li>und dem Text des enthaltenen Listenelements beginnt („Kapitel Eins“). endet dann vor dem </li>des enthaltenen Listenelements. Verschachtelte Listen bilden häufig die Grundlage für Website-Navigationsmenüs, da sie eine gute Möglichkeit darstellen, die hierarchische Struktur der Website zu definieren.

Theoretisch können Sie so viele Listen verschachteln, wie Sie möchten, obwohl es in der Praxis verwirrend sein kann, Listen zu tief zu verschachteln. Bei sehr großen Listen ist es möglicherweise besser, den Inhalt in mehrere Listen mit Überschriften aufzuteilen oder ihn sogar in separate Seiten aufzuteilen.

Wenn Sie validieren, wird Option 1 in HTML 5 als Fehler angezeigt, sodass Option 2 korrekt ist.

Ich bevorzuge Option zwei, da das Listenelement eindeutig als Besitzer dieser verschachtelten Liste angezeigt wird. Ich würde mich immer zu semantisch fundiertem HTML neigen.

Haben Sie darüber nachgedacht, das TAG "dt" anstelle von "ul" für Verschachtelungslisten zu verwenden? Durch den ererbten Stil und die Struktur können Sie einen Titel pro Abschnitt festlegen und den darin enthaltenen Inhalt automatisch tabellieren.

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

Was hier nicht erwähnt wird, ist, dass Option 1 das willkürlich tiefe Verschachteln von Listen ermöglicht.

Dies sollte keine Rolle spielen, wenn Sie den Inhalt / das CSS steuern, aber wenn Sie einen Rich-Text-Editor erstellen, ist dies praktisch.

Mit Google Mail, Posteingang und Evernote können Sie beispielsweise Listen wie die folgenden erstellen:

Mit Option 2 können Sie das nicht fällen (Sie haben ein zusätzliches Listenelement), mit Option 1 können Sie dies.