Verschachtelte und Beschreibungslisten

Zwei Erweiterungen zur letzten Lektion: Listen in Listen, und eine dritte Listenart, die keine Aufzählung ist, sondern Paare aus Begriff und Erklärung.

01 / 02Listen in Listen

Ein li darf beliebiges Markup enthalten, also auch eine weitere Liste. So entstehen Unterpunkte:

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

Wichtig ist die Stelle, an der die zweite Liste hängt: innerhalb des li, zu dem sie gehört. Der Punkt „Hauptgang“ wird dadurch zum Elternteil der beiden Varianten, und der Browser rückt sie ein.

Jetzt der häufigste Fehler dabei:

<ul>
  <li>Hauptgang</li>
  <ul>
    <li>mit Fleisch</li>
    <li>vegetarisch</li>
  </ul>
  <li>Nachtisch</li>
</ul>

Sieht auf der Seite fast gleich aus, ist es aber nicht. Hier steht die Unterliste zwischen zwei li, also als direktes Kind der ul. Das ist ungültiges HTML: In eine ul gehören ausschließlich li. Der Browser stellt es notdürftig dar, aber die Zuordnung ist weg. Ein Screenreader kann nicht mehr sagen, wozu die Unterpunkte gehören, und beim Stylen mit CSS bekommst du Ergebnisse, die niemand erklären kann.

Merksatz: Wenn du eine Unterliste schreibst, schau nach, ob das li darüber schon geschlossen ist. Ist es das, hast du den Fehler gerade gebaut.

Verschachteln lässt sich beliebig tief und beliebig gemischt: eine ol in einer ul, eine ul in einer ol. In der Praxis wird es ab der dritten Ebene unübersichtlich, und das ist meist ein Hinweis darauf, dass der Inhalt eine andere Struktur braucht.

02 / 02Begriff und Erklärung

Die dritte Listenart sieht anders aus und wird deshalb oft übersehen:

<dl>
  <dt>Blanchieren</dt>
  <dd>Kurz in kochendes Wasser geben, dann in Eiswasser abschrecken.</dd>

  <dt>Ziehen lassen</dt>
  <dd>Knapp unter dem Siedepunkt garen, ohne dass es sprudelt.</dd>
  <dd>Dauert länger, macht das Ergebnis aber zarter.</dd>
</dl>

dl steht für „description list“, eine Beschreibungsliste. Sie besteht aus Paaren: dt ist der Begriff („description term“), dd die zugehörige Beschreibung („description details“). Der Browser rückt die Beschreibung ein, so entsteht die typische Glossar-Optik.

Anders als bei ul und ol gibt es kein Gegenstück zum li, das ein Paar zusammenhält. dt und dd stehen als Geschwister nebeneinander, die Zuordnung ergibt sich aus der Reihenfolge. Ein Begriff darf dabei mehrere Beschreibungen haben, so wie oben bei „Ziehen lassen“. Umgekehrt geht es auch: mehrere dt hintereinander, gefolgt von einem gemeinsamen dd, wenn zwei Begriffe dasselbe bedeuten.

Eine Ausnahme gibt es doch: Wer es fürs Layout braucht, darf jedes Paar zusätzlich in ein div packen. Das ist ausdrücklich erlaubt und ändert an der Bedeutung nichts. Gebraucht wird es aber erst mit CSS im Rücken, deshalb bleibt es in diesem Kurs bei der einfachen Form.

Typische Einsätze über das Glossar hinaus: technische Daten eines Produkts, Metadaten eines Artikels (Autor, Datum, Kategorie), eine FAQ-Liste mit Frage und Antwort, oder die Beschriftungen in einer Rechnung. Überall dort, wo ein kurzer Name und ein Wert zusammengehören, ist die dl genauer als zwei Spalten in einer Tabelle.