Richtige Methode, um eine verschachtelte HTML-Liste zu erstellen?

500

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

Antworten:

509

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).
DwB
quelle
41
Hier ist die offizielle W3C-Info, w3.org/wiki/HTML_lists#Nesting_lists , Option 2 ist der richtige Weg
Jose Elera
Ich bin auf einen Fall gestoßen, der mit gültigem HTML5 unmöglich zu erstellen scheint: ein verschachteltes Listenelement ohne übergeordnetes Listenelement (stellen Sie sich vor, Sie drücken die Tabulatortaste, um am Anfang eines Listenelements in einem Textverarbeitungsprogramm einzurücken). Siehe meine Frage hier: stackoverflow.com/questions/61094384/...
Mark
63

Option 2

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

Verschachtelungslisten - UL

csi
quelle
33

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.

Geoffrey Hale
quelle
7

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

user3272456
quelle
6

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.

Ken Gregory
quelle
2

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>
CSSMAN
quelle
2
Ihre Beispiele sind nicht die gleichen. Das zweite Beispiel mit "Auswahl A", "Auswahl B", "Sub 1", "Sub 2" funktioniert nicht für die dt/ ddTags, die gepaart sind. Auch der inhärente Stil (und die Tabelle, vermute ich) stammt lediglich aus dem Standard-Browser-Stylesheet, das sagt also nicht viel aus. Ich würde es wie ein semantisches Element behandeln; Wenn Sie eine Liste mit Definitionen haben oder wenn Sie nur Paare von Titel- / Beschreibungsdaten haben, dlkönnte a eine gute Wahl sein.
Ricket
Können Sie Ihren Kommentar bearbeiten, um gleichwertige Beispiele zu erhalten - z. B. beide, um Auswahl A und Auswahl B mit zwei Untereinträgen Sub 1 und Sub 2 für Auswahl B zu enthalten?
Zlatin Zlatev
-5

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:

willkürlich verschachtelte Liste

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

ibash
quelle
2
Option 1 erzeugt ungültiges HTML. Als diese Frage vor fünf Jahren gestellt wurde, war dies möglicherweise nicht der Fall, aber jetzt.
j08691
Ja, es ist definitiv ungültiges HTML. Es wird jedoch weiterhin verwendet und ist aus Kompatibilitätsgründen weiterhin nützlich. Die Alternative besteht darin, mit Rändern und Aufzählungszeichen zu experimentieren, die beim Verfassen einer E-Mail möglicherweise nicht Ihren Wünschen entsprechen.
Ibash
1
Ich bin mir nicht sicher, warum ich etwas falsch ausgerichtet haben möchte. Können Sie Ihren Kommentar bearbeiten, um eine aussagekräftigere Verwendung zu erhalten?
Zlatin Zlatev
Wichtig ist, dass dies die Freiformbearbeitung für eine Gruppe von Aufzählungszeichen ermöglicht und ein intuitiveres Gefühl vermittelt. Wenn ich als Benutzer eine Liste mit Aufzählungszeichen habe, möchte ich diese möglicherweise einrücken und unter einem neuen Aufzählungszeichen verschachteln. Ohne die Möglichkeit, willkürlich einzurücken, müsste der Benutzer zuerst das Header-Aufzählungszeichen einfügen und danach jedes Aufzählungszeichen einrücken. Mit der Möglichkeit, willkürlich einzurücken, kann der Benutzer die Gruppe von Aufzählungszeichen einrücken und dann ein neues Aufzählungszeichen einfügen.
Ibash