HTML-Liste: Aufzählungen mit li, ul und ol erstellen

Wer sich mit Websites auseinandersetzt, wird zwangsläufig früher oder später dem Begriff HTML begegnen. Durch die Markup-Sprache werden Webdokumente strukturiert, beispielsweise in HTML-Listen. Bekannte HTML-Tags für Listensind <li>, <ul> und <ol>. Wir zeigen Ihnen, wie Sie sie einsetzen.

Was ist eine HTML-Liste?

Wenn Text auf Websites in HTML (Hypertext Markup Language) nicht nur als einzelne Absätze oder Fließtext erscheinen soll, sondern als geordnete Liste, werden diese Aufzählungen HTML List, auf Deutsch HTML-Liste, genannt.

Zur Strukturierung der Liste gibt es unterschiedliche Möglichkeiten; sie alle eint die klare Logik des Aufbaus. Die Grundzüge von HTML sind zudem recht leicht zu erlernen – mit wenigen Handgriffen können Sie Ihre eigene HTML-Liste erstellen.

Eine Textwüste ohne Struktur mit reinem Fließtext liest niemand gerne. Außerdemstraft GoogleSie als Websitebetreiber beziehungsweise-betreiberin ab, wenn Ihre Texte keine Struktur haben, Stichwort Suchmaschinenoptimierung.

Es ist daher wichtig, Struktur in Ihre Texte zu bringen. Mit Listen und Aufzählungen funktioniert das besonders gut. Davon gibt es viele verschiedene Arten:

• Ungeordnete HTML-Listen
• Geordnete HTML-Listen
• Nummerierte HTML-Listen
• Verschachtelte HTML-Listen
• HTML-Listen ohne Punkte

HTML-Tags: Liste leicht gemacht

Bevor wir die einzelnen Listen vorstellen, zeigen wir Ihnen, welche HTML-Tags Sie dafür benötigen. Tags sind die kurzen, in Kleiner-Größer-Zeichen (<>) festgehaltenen Befehle, auf denen HTML basiert. Die folgenden HTML-Tags kreieren Listen:

• <li> steht für ein Listenelement
• <ul> steht für eine ungeordnete Liste
• <ol> steht für eine geordnete Liste

Es gibt noch weitere mit Listen in Verbindung stehende HTML-Tags wie <menu>, <dl>, <dt> oder <dd>. Wir verwenden im Folgenden jedoch die drei gängigen <li>, <ul> und <ol>.

Ungeordnete Liste: HTML mit <ul>

Eine ungeordnete Liste erstellen Sie mit dem HTML-Tag <ul>. Damit schaffen Sie eine Aufzählung ohne bestimmte Reihenfolge. Wie immer in der HTML-Sprache gilt: Den Beginn eines Abschnitts bildet – um im Beispiel zu bleiben – <ul>, das Ende wird mit dem gleichen Befehl, aber einem zusätzlichen Schrägstrich markiert: </ul>.Für die einzelnen Aufzählungen verwenden Sie den HTML-Tag <li>, der für jede Listenart gleich bleibt.

Der HTML-Code für eine ungeordnete Liste sieht wie folgt aus:

Das Ergebnis sieht dann wie folgt aus, im Standard dargestellt mit ausgefüllten, kleinen, schwarzen Aufzählungszeichen:

Überschrift: ungeordnete Liste

• Der erste Listeneintrag
• Ein zweiter Listeneintrag
• Listeneintrag Nummer beliebig
• Der letzte Listeneintrag

Mit dem HTML-Tag <type> lässt sich der Aufzählungsstil auf Wunsch ändern. Der Befehl für viereckige Aufzählungspunkte lautet beispielsweise <ul type="square">.

HTML: Geordnete Liste und nummerierte Liste

Eine geordnete Liste erstellen Sie ähnlich. Der Unterschied liegt auf der Hand: Anstatt beliebiger Aufzählungspunkte werden hier Nummern vergeben. Sie verwenden dafür wieder <li> für die Listenelemente und <ol> für die Aufzählung an sich.

Ein beispielhafter HTML-Code sieht wie folgt aus:

In HTML hat die nummerierte Liste standardmäßig arabische Zahlen:

Überschrift: geordnete Liste

1. Listenelement 1
2. Listenelement 2
3. Listenelement 3
4. Listenelement 4

Alternativ können Sie wie auch bei einer ungeordneten Liste andere Auflistungszeichen wählen. Mit dem Befehl <ol type=“A“> erhalten Sie beispielsweise eine Buchstabenliste mitGroßbuchstaben, mit <ol type=“a“> Kleinbuchstaben, mit <ol type=“i“> kleine römische Zahlen und mit <ol type=“I“> große römische Zahlen. So können Nutzende die Liste an ihre spezifischen Anforderungen anpassen.

HTML: Verschachtelte Liste erstellen

Sämtliche Listen lassen sich auch beliebig ineinander verschachteln. Diese Befehle benötigen Sie, wenn eine Liste in einer anderen auftauchen soll. Eine beispielhafte verschachtelte HTML-Liste sieht in der Darstellung wie folgt aus:

Überschrift: verschachtelte Liste

1. Listenelement 1
2. Listenelement 2
   1. Unterelement 1
   2. Unterelement 2
   3. Unterelement 3
3. Listenelement 3
4. Listenelement 4

Der dazugehörige HTML-Code ist eine Kombination aus zwei Listenarten. Dafür schieben Sie eine Liste in die andere. Das funktioniert mit diesem Code:

Sie sehen: Da die Aufzählung der Unterelemente im Beispiel mit kleinen Buchstaben aufgeführt wird, ist im HTML-Code der Befehl <ol type="a"> verwendet. So können Sie beliebig viele geordnete und ungeordnete wie verschiedene Aufzählungstypen miteinander kombinieren.

HTML: Liste ohne Punkte erstellen

Eine weitere Option bietet die Liste gänzlich ohne Aufzählungszeichen. Hierbei werden alle Listenpunkte untereinander geschrieben – dafür kommen Zeilenumbrüche mit <br> zum Einsatz. Ein kurzer HTML-Code sieht wie folgt aus:

Das Ergebnis sieht gleich aus wie die der HTML-Code– nur eben ohne die HTML-Tags:

Aufzählungspunkt 1

Aufzählungspunkt 2

Fazit: Ganz einfach eine HTML-Liste erstellen und Informationen übersichtlich strukturieren

Viele User und Userinnen schrecken beim Begriff HTML direkt zurück – eine Programmiersprache, Markup-Sprache, Websprache muss bestimmt schwer zu verstehen sein. Wenn Sie sich jedoch mit Elementen wie HTML-Listen befassen, merken Sie schnell, dass HTML für einfache Anwendungen nicht sehr komplex ist.

Um HTML-Listen erstellen zu können, brauchen Siebeispielsweise nur eine Handvoll HTML-Befehle – schon können Sie geordnete und ungeordnete Listen oder Listen ohne Punkte erstellen.

Titelbild: stoman / Unsplash