Das ol-Element: Die nummerierte Liste

vom 16.01.2015 von Oliver Misch

Das <ol> ("ordered list") ist die Liste mit Nummern, für alles wo die Reihenfolge zählt: Anleitungsschritte, Top-10-Listen, Platzierungen. Die Nummerierung übernimmt der Browser, du schreibst nur die Punkte als li. Das ist der halbe Charme: Punkt drei löschen, und aus vier wird automatisch drei.

Syntax und Beispiel

HTML-Code

<ol>
    <li>Editor öffnen</li>
    <li>Grundgerüst eintippen</li>
    <li>Als index.html speichern</li>
</ol>

Ergebnis

Editor öffnen
Grundgerüst eintippen
Als index.html speichern

Die Attribute

Attribut	Zweck
`start="5"`	Beginnt die Zählung bei 5 statt bei 1. Praktisch wenn eine Liste durch einen Absatz unterbrochen wird.
`reversed`	Zählt rückwärts, ideal für Countdowns ("Platz 10 bis Platz 1").
`type="a"`	Nummeriert mit Buchstaben (a, b, c) oder mit `type="I"` römisch. Für reine Optik ist allerdings die CSS-Eigenschaft list-style-type die bessre Adresse.

ol oder ul?

Die Testfrage: Würde sich die Bedeutung ändern wenn man die Punkte mischt? Bei "Editor öffnen, speichern, eintippen" ja, also ol. Bei einer Einkaufsliste nein, also ul. Verschachteln funktioniert übrigens genau wie bei der ul, auch gemischt: eine ol darf ul-Unterlisten enthalten und umgekehrt.

Typische Fehler

Nummern von Hand in den Text schreiben ("1. Editor öffnen" als li-Inhalt). Dann steht dort doppelt nummeriert "1. 1. Editor öffnen".
Eine ol nehmen weil die Nummern hübsch aussehen, obwohl keine Reihenfolge gemeint ist.

Drei nützliche Attribute

Die nummerierte Liste bringt Extras mit, die kaum jemand kennt und die gelegentlich Gold wert sind:

<ol start="5">          <!-- beginnt bei 5 -->
<ol reversed>           <!-- zählt rückwärts: Countdown! -->
<ol type="a">           <!-- a, b, c statt 1, 2, 3 -->

Das start-Attribut hilft, wenn eine Anleitung durch einen Zwischenabsatz unterbrochen wird und die zweite Liste bei Schritt 5 weiterzählen soll. Und reversed macht aus jeder Liste eine Top-10 die bei Platz 10 anfängt, ein kleines Vergnügen ganz ohne CSSS.

Wann ol, wann ul?

Die Testfrage lautet: Würde eine andere Reihenfolge den Inhalt falsch machen? Bei einem Rezept ja (erst kneten, dann backen), bei einer Zutatenliste nein. Deshalb Anleitungen und Ranglisten als ol, Sammlungen als ul. Screenreader lesen bei ol die Nummern mit vor ("Schritt drei von sieben"), Nutzer wissen dadurch jederzeit wo sie stehen, genau deshalb ist die semantisch richtige Wahl hier mehr als Kosmetikk.

Verwandt: ul · li · Einsatz in Aktion: Tutorial-Fahrplan