mitmario.dev

Abschnitt 3 · Lektion 2

Verschachtelte Listen

HTML Im Browser 2 Min Lesezeit 3 BeispieleLektion 2 von 4

Manche Punkte einer Liste haben selbst Unterpunkte. Im Menü gibt es den Hauptgang in zwei Varianten, und auf der Einkaufsliste steht unter „Wochenmarkt“ etwas anderes als unter „Supermarkt“. Zwei Listen untereinander verlieren die Zuordnung, ein Absatz mit Spiegelstrichen auch. In HTML steckt dafür eine Liste in einer Liste.

Die Unterliste gehört ins li

Unterpunkte richtig einhängen 
<ul>
  <li>Vorspeise</li>
  <li>
    Hauptgang
    <ul>
      <li>mit Fleisch</li>
      <li>vegetarisch</li>
    </ul>
  </li>
  <li>Nachtisch</li>
</ul>

Ein li darf beliebiges Markup enthalten, auch eine weitere Liste. Hier steht die Liste mit den beiden Varianten im li von „Hauptgang“, zwischen dem Wort und dem schließenden </li>. Damit ist „Hauptgang“ der Elternpunkt der beiden Varianten, und der Browser rückt sie unter ihm ein.

Das li enthält also zweierlei, sein eigenes Wort und die Liste darunter, und beides gehört zu ihm. Im Code sieht man das an der Einrückung. Die Unterliste steht eine Stufe tiefer als das li, zu dem sie gehört, und das </li> kommt erst nach ihr.

Zwischen zwei li gehört sie zu keinem

So nicht 
<ul>
  <li>Vorspeise</li>
  <li>Hauptgang</li>
  <ul>
    <li>mit Fleisch</li>
    <li>vegetarisch</li>
  </ul>
  <li>Nachtisch</li>
</ul>

Auf der Seite sieht das fast genauso aus. Im Code steht die Unterliste aber zwischen zwei li, als direktes Kind der äußeren ul. Das ist ungültiges HTML, denn in eine ul gehören nur li. Der Browser stellt es trotzdem dar und meldet nichts.

Verloren ist dabei die Zuordnung. Im Baum der Seite hängen die beiden Varianten an keinem Punkt, sie stehen bloß zufällig unter dem Hauptgang. Wer die Zuordnung braucht, ein Screenreader beim Vorlesen oder später das CSS, findet sie nicht, und der Validator aus Abschnitt 11 meldet die Stelle als Fehler.

Zu erkennen ist der Fehler an einer Stelle im Code. Steht direkt über einem <ul> ein schließendes </li>, ist die Unterliste schon draußen. Ich rücke Unterlisten deshalb immer eine Stufe tiefer ein als ihr li. Dann fällt ein </li> an der falschen Stelle im Code auf, auch wenn die Seite nichts davon zeigt.

Gemischt verschachteln

Eine Liste in einem Arbeitsschritt 
<ol>
  <li>Den Ofen vorheizen.</li>
  <li>
    Das Gemüse schneiden:
    <ul>
      <li>die Paprika in Streifen</li>
      <li>die Zucchini in Scheiben</li>
    </ul>
  </li>
  <li>Alles mit Öl mischen und aufs Blech geben.</li>
</ol>

Die Listenarten lassen sich mischen. Die äußere Liste ist hier nummeriert, weil die Schritte eine feste Reihenfolge haben. Die Unterliste im zweiten Schritt ist es nicht, denn ob zuerst die Paprika oder die Zucchini drankommt, ist egal. Jede Ebene beantwortet die Frage aus der letzten Lektion für sich: Ändert ein Vertauschen den Sinn? Steckt eine nummerierte Liste in einer nummerierten, zählt sie übrigens wieder ab 1, jede Ebene hat ihre eigenen Nummern.

Wie tief verschachtelt wird, begrenzt HTML nicht. Ab der dritten Ebene wird es aber schnell unübersichtlich, und das ist oft ein Zeichen, dass der Inhalt eine andere Gliederung braucht, etwa ein paar Zwischenüberschriften.

Zum Mitnehmen

Eine Unterliste steht im li des Punkts, zu dem sie gehört, also vor seinem schließenden Tag. Zwischen zwei li sieht sie fast gleich aus, gehört aber zu keinem Punkt mehr.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.