Aufzählungen

Listen sind der unauffälligste und meistgenutzte Baustein im Web. Navigationen sind Listen, Zutaten sind Listen, Suchergebnisse sind Listen, Produktübersichten sind Listen. Sobald mehrere gleichartige Dinge nebeneinanderstehen, ist eine Liste das passende Werkzeug.

01 / 03Zwei Sorten, ein Unterschied

HTML kennt zwei Aufzählungen, und der Unterschied ist keine Frage der Optik:

<h2>Was du brauchst</h2>
<ul>
  <li>Linsen</li>
  <li>Suppengrün</li>
  <li>Essig</li>
</ul>

<h2>So geht es</h2>
<ol>
  <li>Suppengrün klein schneiden</li>
  <li>Linsen zugeben und aufgießen</li>
  <li>30 Minuten köcheln lassen</li>
</ol>

ul steht für „unordered list“, eine ungeordnete Liste. Die Punkte gehören zusammen, aber ihre Reihenfolge bedeutet nichts. Du könntest Linsen und Essig vertauschen, und die Einkaufsliste wäre immer noch richtig.

ol steht für „ordered list“. Hier bedeutet die Reihenfolge etwas: Schritt zwei kommt nach Schritt eins, und wer die Linsen vor dem Suppengrün in den Topf wirft, bekommt ein anderes Ergebnis. Deshalb nummeriert der Browser die Punkte.

Beide füllst du mit li, für „list item“. Und li steht immer in einer Liste. Ein li allein im Dokument ist ungültig, auch wenn der Browser es notdürftig darstellt.

Die Entscheidung ist also einfach: Frag dich, ob ein Vertauschen den Sinn ändert. Ja heißt ol, nein heißt ul. Dass eine ul Punkte zeigt und eine ol Zahlen, ist nur die Voreinstellung des Browsers und lässt sich mit CSS jederzeit ändern.

02 / 03Ein Listenpunkt ist kein Einzeiler

Häufiges Missverständnis: dass in ein li nur ein kurzer Text passt. Tatsächlich darf ein li alles enthalten, was du sonst auch schreibst:

<ul>
  <li>
    <h2>Linsensuppe</h2>
    <p>Braucht 30 Minuten und hält drei Tage.</p>
  </li>
  <li>
    <h2>Ofengemüse</h2>
    <p>Alles auf ein Blech, fertig.</p>
  </li>
</ul>

Hier steckt in jedem Punkt eine Überschrift und ein Absatz. Genau so baut man Kartenlisten, Suchergebnisse oder Produktübersichten: Der li hält zusammen, was zu einem Eintrag gehört, und innen steht ganz normales Markup.

Das ist mehr als Kosmetik. Ein Screenreader kündigt eine Liste mit ihrer Länge an: „Liste mit zwei Einträgen“. Wer stattdessen zehn div untereinander stellt, verschenkt genau diese Orientierung.

03 / 03Zahlen, die nicht bei eins beginnen

Die geordnete Liste kennt drei Attribute, die selten gebraucht werden und dann sehr praktisch sind:

<ol start="4">
  <li>Abschmecken</li>
  <li>Servieren</li>
</ol>

<ol type="a">
  <li>Variante mit Speck</li>
  <li>Variante vegetarisch</li>
</ol>

<ol reversed>
  <li>Platz drei</li>
  <li>Platz zwei</li>
  <li>Platz eins</li>
</ol>

start legt die Anfangszahl fest, hier beginnt die Liste bei vier. Nützlich, wenn eine Anleitung durch einen Absatz unterbrochen wird und danach weiterzählen soll. Dort steht immer eine normale Zahl, auch wenn du Buchstaben oder römische Ziffern anzeigst: start="4" beginnt bei d beziehungsweise iv.

type ändert die Art der Nummerierung: a für Kleinbuchstaben, A für Großbuchstaben, i und I für römische Ziffern, 1 ist die Voreinstellung. Fürs bloße Aussehen nimmt man list-style-type in CSS. Ins HTML gehört type dann, wenn die Nummer selbst zum Inhalt gehört, etwa in einem Vertrag, in dem später auf „Absatz c“ verwiesen wird.

reversed zählt rückwärts. Der Klassiker ist die Top-Liste, bei der man den ersten Platz zuletzt nennt. Es ist ein Boolean-Attribut, es steht also einfach da, ohne Wert.

Beachte, dass all das nur bei ol erlaubt ist. Eine ungeordnete Liste hat nichts zu nummerieren, start und reversed bewirken dort nichts. Ein type an einer ul malt der Browser aus alten Zeiten zwar noch, gültiges HTML ist es aber nicht. Fürs Aussehen der Punkte ist CSS zuständig.