# HTML Ordered Lists erstellen mit dem ol-Tag

HTML Ordered Lists, also nummerierte Listen, sind das Gegenstück zur ungeordneten Liste, denn sie strukturieren Aufzählungspunkte hierarchisch und alphanumerisch. Jede Ordered List wird mit dem HTML-`<ol>`-Tag begonnen und mit dem `</ol>`-Tag geschlossen. Der Vorteil nummerierter Listen liegt in mehr Übersichtlichkeit und einem klaren Website-Design.

## Was ist eine HTML Ordered List?

Eine HTML Ordered List ist eine geordnete Liste in [HTML](https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-html/)-Dokumenten, die eine nummerierte Abfolge von Listenelementen darstellt. Eine solche Liste wird mit dem `<ol>`-Tag erstellt und jedes Listenelement innerhalb der Liste wird mit dem `<li>`-Tag (List Item) markiert. Standardmäßig werden die einzelnen Punkte von HTML `<ol>` mit aufsteigenden Zahlen versehen – es gibt jedoch auch andere Möglichkeiten zur Nummerierung wie z. B. Buchstaben oder römische Zahlen.

Nummerierte HTML-Listen zeichnen sich durch eine **feste, bedeutungsvolle und hierarchische Reihenfolge der Aufzählung** aus. Die Aufzählungspunkte können und sollen nicht beliebig aufeinanderfolgen, sondern treffen durch die klare Logik ihrer Reihenfolge eine semantische Aussage.

Tipp Die HTML Ordered List zählt zur Gruppe der [HTML-Lists](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-lists/): Ihr genaues Gegenstück ist die [HTML Unordered List](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-unordered-list/), in der die einzelnen Listenpunkte ohne Nummerierung aufgeführt werden. Mit der Definitionsliste (auch Description List) gibt es eine dritte Variante, die speziell für die Strukturierung von Begriffen und ihren Erklärungen bzw. Definitionen konzipiert ist.

## Warum sind sortierte Listen für SEO wichtig?

Die übersichtliche Strukturierung von HTML-Dokumenten spielt für die Suchmaschinenoptimierung und für die Barrierefreiheit Ihrer Website eine wichtige Rolle. Ein **sinnvoll, logisch und abwechslungsreich gegliederter Text** ist für die Bewertung und Erfassung des Contents ebenso wichtig wie die Qualität des Inhalts, Keywords und die richtigen [HTML-Meta-Tags](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-meta-tag/). HTML Ordered List zählen neben Überschriften, Zwischenüberschriften und Fettungen zu den wichtigsten Gestaltungselementen, die Sie in HTML zur Verfügung haben.

## Wann kommen in HTML nummerierte Listen zum Einsatz?

Häufige Anwendungsbereiche für sortierte Listen umfassen:

- Schritt-für-Schritt-Anleitungen/Tutorials
- Ranglisten/Best-of-Listen
- Abläufe oder Abfolgen von Prozessen oder Arbeitsschritten
- Hierarchische Aufzählungen (beispielsweise von Rezeptzutaten)

## Wie lässt sich eine HTML Ordered List erstellen?

Um Ihren Texten eine **klare Struktur durch sortierte Listenelemente** zu verleihen, benötigen Sie folgende [HTML-Tags](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-tags/):

- `<ol>`: Markiert den Startpunkt einer Ordered List
- `</ol>`: Markiert das Ende einer nummerierten Liste
- `<li>`: Beginnt ein Listenelement
- `</li>`: Schließt ein Listenelement

Die Syntax für eine sortierte Liste sieht wie folgt aus:

```html
<ol>
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt</li>
<li>Dritter Listenpunkt</li>
<li>Vierter Listenpunkt</li>
<li>…</li>
</ol>
```

Insofern es im HTML-Dokument nicht anders angegeben ist, versehen Browser die Liste standardmäßig **mit arabischen Zahlen in aufsteigender Reihenfolge**.

## Wie lässt sich die Nummerierung von HTML `<ol>` ändern?

Möchten Sie die Art der Aufzählung oder den Startwert definieren, so benötigen Sie spezielle [HTML-Attribute](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-attribute/), mit denen Sie eine Aufzählung mit **Zahlen und Buchstaben**, mit einem **Startwert** oder **in umgekehrter Reihenfolge** festlegen.

### Art der Aufzählung mit `type` festlegen

Um die **Art der Aufzählung zu definieren**, ergänzen Sie das HTML-`<ol>`-Tag wie folgt um das `type`-Attribut:

```html
<ol type="X">
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt</li>
<li>…</li>
</ol>
```

Den Platzhalter-Wert `X` können Sie bedarfsmäßig durch **Zahlen, Buchstaben oder römische Ziffern** ersetzen:

- `type=1`: Legt die Aufzählung mit arabischen Zahlen beginnend bei 1 fest (standardmäßig, wenn nicht anders angegeben)
- `type=A`: Legt die Aufzählung in Großbuchstaben beginnend mit A fest
- `type=a`: Legt die Aufzählung in Kleinbuchstaben beginnend mit a fest
- `type=i` / `type=I`: Legt die Aufzählung in römischen Ziffern in Kleinschreibung (i, ii, iii, iv…) oder in Großschreibung (I, II, III, IV…) fest

### Startwert festlegen mit `start`-Attribut

Möchten Sie, dass die Liste nicht mit „1“ oder „A“ beginnt, so können Sie folgendermaßen **einen eigenen Startwert** definieren:

```html
<ol start="X">
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt</li>
<li>…</li>
</ol>
```

Hier ersetzen Sie das `X` durch den Wert, bei dem die Aufzählung beginnen soll. Möchten Sie die Zählung bei der Nummer 5 in aufsteigender Reihenfolge beginnen, sieht der passende Code also wie folgt aus:

```html
<ol start="5">
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt</li>
<li>…</li>
</ol>
```

### Aufzählung umkehren mit `reversed`

Um **die Zählrichtung der Liste umzukehren**, also in absteigender statt aufsteigender Reihenfolge, verwenden Sie die Anweisung `reversed`. Die Syntax sieht hier wie folgt aus:

```html
<ol start="1" reversed>
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt</li>
<li>…</li>
</ol>
```

Je nach Umfang der Liste beginnt die Zählung nun beim größten Wert und zählt bis 1 herunter.

Tipp Sie möchten mehr zur Verwendung von HTML erfahren? Dann hilft Ihnen unser [HTML-Einsteiger-Tutorial](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-lernen-das-grosse-einsteiger-tutorial/) weiter.


This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/html-ordered-list/](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-ordered-list/) for AI/LLM consumption.