<ol>
Zuletzt aktualisiert am 3. Februar 2026
Das <ol>-Element (Ordered List) erstellt eine geordnete Liste: eine Aufzählung, bei der die Reihenfolge der Einträge eine Rolle spielt. Im Gegensatz zu <ul> nummeriert der Browser die Einträge automatisch durch. Immer wenn du eine Schritt-für-Schritt-Anleitung, eine Rangliste oder eine chronologische Abfolge darstellen willst, ist <ol> das richtige Element. Auf dieser Seite lernst du die verschiedenen Nummerierungsarten kennen und wie du den Startwert oder die Zählrichtung änderst.
Grundlagen
Eine geordnete Liste sagt dem Browser und Screenreadern: “Diese Einträge haben eine bestimmte Reihenfolge, die wichtig ist.” Ein Screenreader liest zum Beispiel an: “Liste mit 5 Einträgen” und sagt bei jedem Eintrag die Position dazu: “1. Wasser kochen, 2. Teebeutel einlegen” usw. Das gibt Nutzern die Information, dass es sich um eine Abfolge handelt.
<ol>ist ein Block-Element und beginnt auf einer neuen Zeile- Direkte Kindelemente müssen
<li>-Elemente sein, nichts anderes darf direkt in<ol>stehen - Der Browser erzeugt die Nummerierung automatisch, du musst die Zahlen nicht selbst schreiben
- Die Nummerierungsart lässt sich über das
type-Attribut ändern (Zahlen, Buchstaben, römische Ziffern) - Mit
startundreversedkannst du den Startwert und die Zählrichtung steuern
Wann <ol>, wann <ul>?
Wenn du die Einträge umsortieren könntest und der Sinn gleich bleibt, nimm <ul>. Wenn die Reihenfolge wichtig ist, nimm <ol>.
<ol>(geordnet): Kochrezepte, Anleitungen, Ranglisten, Top-10-Listen, Tagesordnungspunkte<ul>(ungeordnet): Zutaten, Features, Navigationspunkte, Tags
Syntax
<ol>
<li>Ersten Schritt ausführen</li>
<li>Zweiten Schritt ausführen</li>
<li>Dritten Schritt ausführen</li>
</ol>Attribute
| Attribut | Typ | Beschreibung | Beispiel |
|---|---|---|---|
type | String | Nummerierungsart: 1 (Zahlen, Standard), a (Kleinbuchstaben), A (Großbuchstaben), i (kleine römische Ziffern), I (große römische Ziffern). | type="a" |
start | Number | Startwert der Nummerierung. Akzeptiert immer eine Zahl, auch bei Buchstaben- oder Römer-Nummerierung. | start="5" |
reversed | Boolean | Kehrt die Zählrichtung um (absteigend statt aufsteigend). | reversed |
Beispiele
Kochrezept als Schritt-für-Schritt-Anleitung
Der klassische Anwendungsfall: Eine Anleitung, bei der die Reihenfolge entscheidend ist. Du kannst nicht zuerst die Nudeln abgießen und dann das Wasser kochen:
<h4>Spaghetti kochen</h4>
<ol>
<li>Großen Topf mit Wasser füllen</li>
<li>Wasser zum Kochen bringen</li>
<li>Salz hinzufügen</li>
<li>Spaghetti ins kochende Wasser geben</li>
<li>8 bis 10 Minuten kochen lassen</li>
<li>Spaghetti abgießen und servieren</li>
</ol>Verschiedene Nummerierungsarten
Mit dem type-Attribut änderst du die Art der Nummerierung. Das ist besonders nützlich bei verschachtelten Listen oder Gliederungen:
<ol>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ol>
<ol type="A">
<li>Abschnitt A</li>
<li>Abschnitt B</li>
</ol>
<ol type="i">
<li>Erster Unterpunkt</li>
<li>Zweiter Unterpunkt</li>
</ol>Countdown mit reversed
Das reversed-Attribut kehrt die Zählrichtung um, perfekt für Countdowns oder Top-Listen, die mit dem ersten Platz enden:
<ol reversed>
<li>JavaScript</li>
<li>Python</li>
<li>TypeScript</li>
</ol>Barrierefreiheit
- Screenreader-Verhalten: Screenreader kündigen
<ol>als “Liste mit X Einträgen” an und lesen bei jedem<li>die Position vor (“1 von 5”, “2 von 5” usw.). So wissen blinde Nutzer, dass eine Reihenfolge besteht und wo sie sich in der Liste befinden. - Unterschied zu
<ul>ist hörbar: Ein Screenreader unterscheidet zwischen geordneter und ungeordneter Liste. Wenn du<ul>für eine Anleitung verwendest, fehlt diese Information. Nutze<ol>immer dann, wenn die Reihenfolge eine Bedeutung hat. - Verschachtelte Listen: Screenreader geben die Verschachtelungstiefe an. Eine gute Struktur hilft bei der Navigation, aber übertreibe es nicht mit zu vielen Ebenen.
Häufige Fehler
<li> außerhalb von <ol> platziert: <li>-Elemente gehören immer in eine <ul> oder <ol>. Ein <li> direkt im <body> oder in einem <div> ist ungültiges HTML. Der Browser rendert es zwar, aber die Semantik geht verloren.
type-Attribut mit CSS list-style-type verwechselt: Das HTML-Attribut type steuert den Zähler (z.B. type="a" für Kleinbuchstaben). Das CSS-Property list-style-type steuert das Erscheinungsbild der Nummerierung. Für rein visuelles Styling solltest du CSS bevorzugen, da es mehr Optionen bietet und Struktur von Darstellung trennt.
Falsche Verschachtelung: Eine verschachtelte <ol> gehört innerhalb eines <li>, nicht direkt in die äußere <ol>. Schreibe <ol><li>...<ol><li>...</li></ol></li></ol>, nicht <ol><li>...</li><ol><li>...</li></ol></ol>.
Browser-Kompatibilität
Das ol-Element wird von allen Browsern seit den Anfängen des Webs vollständig unterstützt. Auch das reversed-Attribut funktioniert in allen modernen Browsern.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Chrome | Komplett | — |
| Firefox | Komplett | — |
| Safari | Komplett | — |
| Edge | Komplett | — |
| Opera | Komplett | — |
Email-Kompatibilität
Geordnete Listen werden in den meisten Email-Clients unterstützt, mit den üblichen Einschränkungen bei Outlook.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Apple Mail | Komplett | — |
| Gmail | Komplett | — |
| Outlook | Teilweise | Outlook setzt eigene Margins und Padding auf Listen. Das type-Attribut wird teilweise ignoriert. Die Nummerierung weicht möglicherweise ab. |
| Thunderbird | Komplett | — |
| Yahoo Mail | Komplett | — |
Verwandte Elemente
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.