Sie sind hier: Startseite -> HTML-Grundlagen -> Aufzählungslisten -> Geordnete Liste (OL)

HTML-Grundlagen: geordnete Liste (ol)

OL-Tag: geordnete oder nummerierte Liste

Als Alternative zur ungeordneten Liste kann man eine Aufzählungsliste in einer HTML-Seite auch als geordnete oder auch nummerierte Liste anbieten. Der Unterschied zur ungeordneten Liste besteht darin, dass es eine Nummerierung gibt, ansonsten ist das Konzept das gleiche, auch die Listeneinträge haben den gleichen Tag.

Im ersten Beispiel ist eine geordnete oder nummerierte Liste durch den ol-Befehl (ordered list - geordnete oder nummerierte Liste) entstanden. Auch diese Listenform kann mehrfach untergliedert werden und greift auf den li-Tag zurück, um Unterpunkte zu definieren.

Die Liste könnte mit CSS besser formatiert werden, beispielweise die Abstände nach oben, zum linken Rand oder zwischen den einzelnen Aufzählungspunkten lässt sich anpassen.

Zusätzlich ist es möglich, die Liste zu verschachteln. Im dritten Beispiel sieht man eine nummerierte Liste, bei der der erste Unterpunkt nicht abgeschlossen (/li) wurde, sondern eine zweite Liste integriert wurde. Das Ergebnis sieht so aus:


  1. Listenpunkt 1

    1. Listenpunkt 3

    2. Listenpunkt 4


  2. Listenpunkt 2

Wie man sieht, funktioniert das Verschachteln gut, aber ein Problem gibt es bei der nummerierten Liste, denn die Nummerierung beginnt in der nächsten Ebene wieder mit 1, wodurch eine Verwirrung entstehen kann und die Übersicht reduziert ist. Deshalb werden verschachtelte Aufzählungslisten meist als ungeordnete Listen definiert.

Ebenfalls interessant:

Ungeordnete Liste (UL)

Informationen über die ungeordnete Liste in HTML, die durch den UL-Tag auf Webseiten dargestellt werden kann.

[aktuelle Seite]

Geordnete Liste (OL)

Informationen über die nummerierte Liste in HTML, die durch den OL-Tag auf Webseiten dargestellt werden kann.

Listeneintrag (LI)

Informationen über den LI-Tag, mit dem in einer Aufzählungsliste die einzelnen Unterpunkte definiert werden.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Aufzählungslisten

Startseite HTML-Grundlagen