<ol>

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.

Steckbrief <ol>

Kategorie: Listen
Art: Block
Attribute: 3
Beispiele: 3
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 03.02.2026

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 start und reversed kannst 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

index.html

Grundsyntax

<ol>
  <li>Ersten Schritt ausführen</li>
  <li>Zweiten Schritt ausführen</li>
  <li>Dritten Schritt ausführen</li>
</ol>

Attribute

3 Attribute

Attribut und Beispiel	Beschreibung
`type` String type="a"	Nummerierungsart: 1 (Zahlen, Standard), a (Kleinbuchstaben), A (Großbuchstaben), i (kleine römische Ziffern), I (große römische Ziffern).
`start` Number start="5"	Startwert der Nummerierung. Akzeptiert immer eine Zahl, auch bei Buchstaben- oder Römer-Nummerierung.
`reversed` Boolean reversed	Kehrt die Zählrichtung um (absteigend statt aufsteigend).

Beispiele

3 Beispiele

Der klassische Anwendungsfall: Eine Anleitung, bei der die Reihenfolge entscheidend ist. Du kannst nicht zuerst die Nudeln abgießen und dann das Wasser kochen:

index.html

Kochrezept

<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>

Mit dem type-Attribut änderst du die Art der Nummerierung. Das ist besonders nützlich bei verschachtelten Listen oder Gliederungen:

index.html

Nummerierungsarten

<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>

Das reversed-Attribut kehrt die Zählrichtung um, perfekt für Countdowns oder Top-Listen, die mit dem ersten Platz enden:

index.html

Umgekehrte Reihenfolge

<ol reversed>
  <li>JavaScript</li>
  <li>Python</li>
  <li>TypeScript</li>
</ol>

Barrierefreiheit

3 Punkte

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

3 Fehler

01 <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.

02 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.

03 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

Geordnete Listen werden in den meisten Email-Clients unterstützt, mit den üblichen Einschränkungen bei Outlook.

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

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<ol>

Grundlagen

Wann <ol>, wann <ul>?

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter

Wann `<ol>`, wann `<ul>`?