Sie sind hier: Startseite -> HTML-Grundlagen -> Aufzählungslisten

Aufzählungslisten mit HTML aufbauen

Mit oder ohne Nummerierung

Ein wichtiges und gerne eingesetztes Mittel in der Textstruktur auf Webseiten ist die Aufzählungsliste. Sie kann dazu dienen, den Text übersichtlicher zu gestalten, auf eine bestimmte Reihenfolge hinweisen oder Fakten aufzählen. Wenn man also verschiedene Fakten zu einem Thema punktuell darstellen möchte, ist die Aufzählungsliste eine gute Lösung.

In HTML gibt es dafür zwei Befehle, die beide einen zusätzlichen Befehl verwenden. Man unterscheidet die ungeordnete Liste mit dem ul-Tag von der geordneten Liste mit dem ol-Tag.

Aufzählungen auf der Webseite mit UL und OL

Im ersten Beispiel wird eine sogenannte ungeordnete Liste erzeugt, daher auch der ul-Befehl (steht für unordered list - ungeordnete Liste). Ihm folgen die li-Befehle, die für jeweils einen Unterpunkt stehen. Diese Unterpunkte könnte man noch weiter unterteilen, sodass die Liste mehrere Ebenen erhält.

Im zweiten Beispiel ist eine 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.

Wozu diese Listen nutzen?

Es gibt zwei wesentliche Faktoren, warum man die Liste statt einem erklärenden Absatz nutzt. Zum einen gibt es eine sehr gute Übersicht für Argumente, die zu einem Thema gesammelt wurden und zum zweiten lieben die Suchmaschinen Struktur und eine Liste mit mehreren Fakten ist großartig für das Verständnis, worum es auf dieser bestimmten Seite gehen mag.

Auch aus Sicht der Besucherin oder des Besuchers ist die Liste gut, weil man schnell überfliegen kann, ob man auf der richtigen Seite gelandet ist. Die Alternative wäre, dass man erst alle Absätze durchlesen muss, um diese Erkenntnis zu gewinnen.

Listen sorgen für Übersicht

In beiden Fällen kann man die Formatierung durch CSS verbessern und erweitern. So gibt es Möglichkeiten, die Gestaltung, zum Beispiel die Aufzählungssymbole der ungeordneten Liste oder die Art der Aufzählung bei der nummerierten Liste anders zu gestalten. So ist es möglich, wenn auch nicht immer sinnvoll, eine kleine Version des Firmenlogos in die Liste bei jeden Aufzählungspunkt zu integrieren.

Auch die Abstände könnten entsprechend angepasst werden. Die Liste ist oft im Einsatz, um das starre Absatz-Konstrukt eines längeren Textes zu unterbrechen und auch, um die Gliederung deutlicher aufzuzeigen. Vor allem kann man auf einen Blick alle wichtigen Fakten erfassen.

Buchtipp: HTML und CSS (Thalia)*
* = Affiliate-Link; bei Kauf unterstützen Sie diese Plattform

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

Aufzählungslisten mit HTMLArtikel-Thema: Aufzählungslisten mit HTML aufbauen
Beschreibung: Die 🌍 Aufzählungslisten werden auch auf ✅ Webseiten per HTML genutzt, um Informationen strukturiert anbieten zu können.

Kategorien

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

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