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

Es ist also von der Situation abhängig, ob man lieber 1., 2., und 3. haben will oder einfach einen Anführungspunkt und dahinter das Argument der Liste, wie das bei der ungeordneten Liste der Fall ist.

Geordnete Liste in HTML mit dem ol-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, beispielsweise 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.

Formatierung durch CSS-Datei

Mit Hilfe von CSS kann man die Listen welcher Art auch immer gestalten, was Abstände oder auch die Art des Symbols (ungeordnete Liste) oder Zählsymbole (geordnete Liste) betrifft. So können römische Zahlen oder andere Zahlensysteme für die Zählung auch herangezogen werden.

Lesen Sie auch

Die Aufzählungslisten sind neben den Tabellen eine weitere Möglichkeit, um Informationen gefällig aufzubereiten. Mit wenigen Worten kann man Fakten aneinanderreihen, wobei es die ungeordnete Liste mit dem gleichen Listensymbol gibt und die geordnete Liste mit einer Nummerierung. Stets dabei ist der li-Tag, mit dem jeder Eintrag definiert wird.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel