0Pricing
HTML Academy · Lektion

Verschachtelte Listen und Listenformatierung

Verschachteln Sie Listen ineinander und steuern Sie ihr Erscheinungsbild.

Verschachtelte Listen und Listenformatierung ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Listen verschachteln

Listen können innerhalb von <li>-Elementen verschachtelt werden:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Korrekte Verschachtelung

Die verschachtelte Liste muss sich innerhalb eines <li>-Elements befinden und darf kein direktes Kindelement von <ul> oder <ol> sein:

<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
  <ul>   <!-- INVALID -->
    <li>Item</li>
  </ul>
</ul>

<!-- CORRECT: nested ul inside li -->
<ul>
  <li>
    Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

Aufzählungsstile für mehrere Ebenen

Browser verwenden auf jeder Verschachtelungsebene unterschiedliche Aufzählungspunkte:

<ul>
  <li>Level 1 — disc (filled circle)</li>  <!--  • -->
  <ul>
    <li>Level 2 — circle (open circle)</li>  <!--  ○ -->
    <ul>
      <li>Level 3 — square</li>             <!--  ▪ -->
    </ul>
  </ul>
</ul>

Mit CSS zurücksetzen

Überschreiben Sie die Stile verschachtelter Listen mit CSS:

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style each level explicitly */
.nav > li > ul {
  padding-left: 1rem;
  list-style: disc;
}

Verschachtelte nummerierte Listen

Verschachtelte geordnete Listen mit unterschiedlichen Typen:

<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background</li>
      <li>Motivation</li>
    </ol>
  </li>
  <li>Methods
    <ol type="a">
      <li>Data collection</li>
    </ol>
  </li>
</ol>

CSS-Zähler für benutzerdefinierte Nummerierung

Benutzerdefinierte hierarchische Nummerierung mit CSS-Zählern:

ol {
  list-style: none;
  counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }

ol ol {
  counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
  content: counter(level1) '.' counter(level2) ' ';
}

Navigationsmuster mit Akkordeon

Eine verschachtelte Liste kann zu einer ausklappbaren Seitennavigation werden:

<ul class="tree-nav">
  <li>
    <details>
      <summary>Frontend</summary>
      <ul>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
    </details>
  </li>
  <li><a href="/backend">Backend</a></li>
</ul>

Abstände bei verschachtelten Listen

Steuern Sie die visuelle Einrückung mit CSS:

ul {
  padding-left: 1.5rem;  /* Controls indent at each level */
  margin: 0.5rem 0;
}

/* Tighter nested spacing */
ul ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

Wiederholung der Kurzschreibweise list-style

Alle Eigenschaften für Listenstile kombiniert:

/* Shorthand: type position image */
ul {
  list-style: square inside;
}

/* Longhand equivalents: */
ul {
  list-style-type: square;
  list-style-position: inside;   /* inside or outside */
  list-style-image: none;
}

Benutzerdefinierte Symbole als Listenmarkierungen

Verwenden Sie SVG oder Emojis als Listenmarkierungen:

ul.checklist {
  list-style: none;
  padding: 0;
}

ul.checklist li::before {
  content: '✓ ';
  color: #22c55e;
  font-weight: bold;
}

/* Or with a background SVG */
ul.icon-list li {
  padding-left: 2rem;
  background: url('/icons/arrow.svg') no-repeat 0 0.2em;
  background-size: 1rem 1rem;
  list-style: none;
}

Barrierefreiheit verschachtelter Listen

Verschachtelte Listen und Screenreader:

  • Screenreader geben die Verschachtelungsebene und die Anzahl der Elemente bekannt
  • Tiefe Verschachtelungen (4 oder mehr Ebenen) sind verwirrend – beschränken Sie sich möglichst auf 2 bis 3 Ebenen
  • Wenn Sie list-style: none auf der äußeren Liste verwenden, fügen Sie role="list" hinzu

Schnelltest

Wo muss eine verschachtelte Liste innerhalb einer äußeren Liste platziert werden?

Zusammenfassung: Verschachtelte Listen

Das Wichtigste zu verschachtelten Listen:

  • Verschachteln Sie Listen innerhalb von <li> – niemals direkt in <ul>
  • Browser verwenden standardmäßig pro Ebene: disc → circle → square
  • Mit CSS-Zählern können Sie eine eigene hierarchische Nummerierung erstellen
  • Beschränken Sie die Verschachtelung aus Gründen der Benutzerfreundlichkeit auf 2–3 Ebenen
  • Verwenden Sie <details>+<summary> für ausklappbare verschachtelte Navigation

Häufig gestellte Fragen

Ist die Lektion „Verschachtelte Listen und Listenformatierung“ kostenlos?

Ja — der vollständige Text von „Verschachtelte Listen und Listenformatierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Verschachtelte Listen und Listenformatierung“?

Verschachteln Sie Listen ineinander und steuern Sie ihr Erscheinungsbild. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Verschachtelte Listen und Listenformatierung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Ungeordnete Listen: ul und li
  2. Geordnete Listen: ol, start, reversed und type
  3. Definitionslisten: dl, dt und dd
  4. Verschachtelte Listen und Listenformatierung
← Zurück zu HTML Academy