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

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

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

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

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

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

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

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