Sie sind hier: Startseite -> HTML-Grundlagen -> ol (Text - geordnete Liste)

Geordnete Liste in HTML mit dem 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. Grundlage ist der HTML ol-Tag.

Geordnete Liste in HTML mit dem ol-Tag


Webhosting mit viel Software bei Alfahosting (Affiliate-Link)


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


Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)


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.

Was ist, wenn ich mehrere Listen haben will?

Man kennt aus dem Internet viele Seiten, in denen die besten 100 Einträge präsentiert werden - die beliebtesten Lieder oder Filme zum Beispiel. Es kann jetzt sehr lang werden, 100 Titel nummeriert in einem Stück zu präsentieren und lustiger wäre es, wenn man nach 10 Einträgen einen Absatz einschieben könnte.

Das kann man auch machen, denn man bietet eine ol-Liste mit 10 Einträge ein und schreibt dann einen Absatz und baut die nächste ol-Liste auf, aber dann braucht es den Zusatz ol start="11", sodass die Nummerierung mit 11 weitergeführt wird und die Plätze 11 bis 20 gezeigt werden können.

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.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

geordnete Liste in HTMLArtikel-Thema: Geordnete Liste in HTML mit dem ol-Tag
Beschreibung: Mit dem 🌍 ol-Tag kann eine geordnete oder ✅ nummerierte Liste in HTML für die Webseite erstellt werden, womit auch Ranglisten möglich werden.

Kategorien

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

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