HTML Ordered Lists erstellen mit dem ol-Tag

HTML Ordered Lists, also num­me­rier­te Listen, sind das Ge­gen­stück zur un­ge­ord­ne­ten Liste, denn sie struk­tu­rie­ren Auf­zäh­lungs­punk­te hier­ar­chisch und al­pha­nu­me­risch. Jede Ordered List wird mit dem HTML-<ol>-Tag begonnen und mit dem </ol>-Tag ge­schlos­sen. Der Vorteil num­me­rier­ter Listen liegt in mehr Über­sicht­lich­keit und einem klaren Website-Design.

Was ist eine HTML Ordered List?

Eine HTML Ordered List ist eine geordnete Liste in HTML-Do­ku­men­ten, die eine num­me­rier­te Abfolge von Lis­ten­ele­men­ten darstellt. Eine solche Liste wird mit dem <ol>-Tag erstellt und jedes Lis­ten­ele­ment innerhalb der Liste wird mit dem <li>-Tag (List Item) markiert. Stan­dard­mä­ßig werden die einzelnen Punkte von HTML <ol> mit auf­stei­gen­den Zahlen versehen – es gibt jedoch auch andere Mög­lich­kei­ten zur Num­me­rie­rung wie z. B. Buch­sta­ben oder römische Zahlen.

Num­me­rier­te HTML-Listen zeichnen sich durch eine feste, be­deu­tungs­vol­le und hier­ar­chi­sche Rei­hen­fol­ge der Auf­zäh­lung aus. Die Auf­zäh­lungs­punk­te können und sollen nicht beliebig auf­ein­an­der­fol­gen, sondern treffen durch die klare Logik ihrer Rei­hen­fol­ge eine se­man­ti­sche Aussage.

Warum sind sortierte Listen für SEO wichtig?

Die über­sicht­li­che Struk­tu­rie­rung von HTML-Do­ku­men­ten spielt für die Such­ma­schi­nen­op­ti­mie­rung und für die Bar­rie­re­frei­heit Ihrer Website eine wichtige Rolle. Ein sinnvoll, logisch und ab­wechs­lungs­reich ge­glie­der­ter 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 Über­schrif­ten, Zwi­schen­über­schrif­ten und Fettungen zu den wich­tigs­ten Ge­stal­tungs­ele­men­ten, die Sie in HTML zur Verfügung haben.

Wann kommen in HTML num­me­rier­te Listen zum Einsatz?

Häufige An­wen­dungs­be­rei­che für sortierte Listen umfassen:

• Schritt-für-Schritt-An­lei­tun­gen/Tutorials
• Rang­lis­ten/Best-of-Listen
• Abläufe oder Abfolgen von Prozessen oder Ar­beits­schrit­ten
• Hier­ar­chi­sche Auf­zäh­lun­gen (bei­spiels­wei­se von Re­zept­zu­ta­ten)

Wie lässt sich eine HTML Ordered List erstellen?

Um Ihren Texten eine klare Struktur durch sortierte Lis­ten­ele­men­te zu verleihen, benötigen Sie folgende HTML-Tags:

• <ol>: Markiert den Start­punkt einer Ordered List
• </ol>: Markiert das Ende einer num­me­rier­ten Liste
• <li>: Beginnt ein Lis­ten­ele­ment
• </li>: Schließt ein Lis­ten­ele­ment

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 stan­dard­mä­ßig mit ara­bi­schen Zahlen in auf­stei­gen­der Rei­hen­fol­ge.

Wie lässt sich die Num­me­rie­rung von HTML <ol> ändern?

Möchten Sie die Art der Auf­zäh­lung oder den Startwert de­fi­nie­ren, so benötigen Sie spezielle HTML-Attribute, mit denen Sie eine Auf­zäh­lung mit Zahlen und Buch­sta­ben, mit einem Startwert oder in um­ge­kehr­ter Rei­hen­fol­ge festlegen.

Art der Auf­zäh­lung mit type festlegen

Um die Art der Auf­zäh­lung zu de­fi­nie­ren, 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 Platz­hal­ter-Wert X können Sie be­darfs­mä­ßig durch Zahlen, Buch­sta­ben oder römische Ziffern ersetzen:

• type=1: Legt die Auf­zäh­lung mit ara­bi­schen Zahlen beginnend bei 1 fest (stan­dard­mä­ßig, wenn nicht anders angegeben)
• type=A: Legt die Auf­zäh­lung in Groß­buch­sta­ben beginnend mit A fest
• type=a: Legt die Auf­zäh­lung in Klein­buch­sta­ben beginnend mit a fest
• type=i / type=I: Legt die Auf­zäh­lung in römischen Ziffern in Klein­schrei­bung (i, ii, iii, iv…) oder in Groß­schrei­bung (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 fol­gen­der­ma­ßen einen eigenen Startwert de­fi­nie­ren:

<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 Auf­zäh­lung beginnen soll. Möchten Sie die Zählung bei der Nummer 5 in auf­stei­gen­der Rei­hen­fol­ge beginnen, sieht der passende Code also wie folgt aus:

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

Auf­zäh­lung umkehren mit reversed

Um die Zähl­rich­tung der Liste um­zu­keh­ren, also in ab­stei­gen­der statt auf­stei­gen­der Rei­hen­fol­ge, 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.