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

Option 2 ist richtig.

Die verschachtelte Liste sollte sein innerhalb einer <li> Element der Liste, in der sie verschachtelt ist.

Link zum W3C-Wiki über Listen (aus dem Kommentar unten): HTML-Listen-Wiki .

Link zum HTML5 W3C ul spez: HTML5 ul . Beachten Sie, dass eine ul Element kann genau null oder mehr enthalten li Elemente. Das Gleiche gilt für HTML5 ol . Die Liste der Beschreibungen ( HTML5 dl ) ist ähnlich, erlaubt aber sowohl dt y dd Elemente.

Weitere Anmerkungen:

• dl = Definitionsliste.
• ol = geordnete Liste (Zahlen).
• ul = unsortierte Liste (Aufzählungszeichen).

---

Offiziell W3C-Link (aktualisiert).

Answer 2

Option 2

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

Verschachtelungslisten - UL

Answer 3

Option 2 ist richtig: Die verschachtelte <ul> ist ein Kind der <li> es gehört dazu.

Wenn Sie validieren Option 1 wird als Fehler in html 5 angezeigt - Kredit: Benutzer3272456

---

Richtig: <ul> als Kind von <li>

Der richtige Weg, um eine verschachtelte HTML-Liste zu erstellen, ist mit der verschachtelten <ul> als ein Kind des <li> zu dem sie gehört. Die verschachtelte Liste sollte sich innerhalb der <li> Element der Liste, in der es verschachtelt ist.

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

---

W3C-Standard für Verschachtelte Listen

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

1. Erstes Kapitel
   1. Abschnitt Eins
   2. Zweiter Abschnitt
   3. Dritter Abschnitt
2. Zweites Kapitel
3. Drittes Kapitel

Das Wichtigste bei der Verschachtelung von Listen ist, dass sich die verschachtelte Liste auf ein bestimmtes Listenelement beziehen sollte. Um dies im Code widerzuspiegeln, ist die verschachtelte Liste innerhalb dieses Listenelements enthalten. Der Code für die obige Liste sieht etwa 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, dass die verschachtelte Liste nach der <li> und dem Text des enthaltenen Listeneintrags ("Kapitel Eins"); endet dann vor dem </li> des enthaltenen Listeneintrags. Verschachtelte Listen bilden häufig die Grundlage für Navigationsmenüs auf Websites, da sie eine gute Möglichkeit darstellen, die hierarchische Struktur der Website zu definieren.

Theoretisch können Sie beliebig viele Listen verschachteln, aber in der Praxis kann es unübersichtlich werden, wenn die Listen zu tief verschachtelt werden. Bei sehr großen Listen ist es vielleicht besser, den Inhalt in mehrere Listen mit Überschriften aufzuteilen oder ihn sogar auf separate Seiten aufzuteilen.

Answer 4

Wenn Sie validieren, wird Option 1 als Fehler in html 5 angezeigt, so dass Option 2 richtig ist.

Answer 5

Ich bevorzuge die zweite Option, da sie eindeutig zeigt, dass das Listenelement der Besitzer der verschachtelten Liste ist. Ich würde immer zu semantisch einwandfreiem HTML tendieren.