Das ol-Element: Die nummerierte Liste
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.
Verwandt: ul · li · Einsatz in Aktion: Tutorial-Fahrplan