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

HTML Lists präsentieren ausgewählte Informationen und Elemente in einem HTML-Dokument in Listenform. Je nach Bedarf kann es sich hierbei um eine geordnete Liste, eine ungeordnete Liste oder eine Definitionsliste handeln. Für die Erstellung kommen die HTML-Tags <li>, <ol>, <ul> und <dl> zur Anwendung.

Was sind HTML Lists?

HTML-Listen kommen in HTML zum Einsatz, um Informationen und Textelemente in einer strukturierten und übersichtlichen Listenform darzustellen. Je nach Bedarf lassen sich Inhalte als geordnete Liste mit Nummerierung oder auch als ungeordnete Liste gestalten. Mit Definitionslisten gibt es darüber hinaus seit HTML5 eine dritte Variante, die speziell für die Zuordnung von Begriffen und ihrer Beschreibung geeignet ist.

HTML Lists bilden ein wesentliches Element für die abwechslungsreiche und klare Gestaltung von Websites, um für eine präzise, schnelle und klare Vermittlung von Informationen oder Inhalten zu sorgen. Das gilt sowohl für eine einfache Aufzählung, für eine aufsteigende Nummerierung von Informationen oder für übersichtlich und detailliert präsentierte Definitionen.

Welche Arten von HTML Lists gibt es?

Listen lassen sich in HTML-Dokumenten, wie bereits erwähnt, in verschiedenen Formen darstellen. Während geordnete und ungeordnete Listen sehr häufig Anwendung finden und quasi auf keiner Webseite fehlen dürfen, sind Definitionslisten, die auch Description Lists genannt werden, deutlich seltener im Einsatz. In den nachfolgenden Abschnitten nehmen wir die verschiedenen Arten von HTML-Listen und ihre Syntax etwas genauer unter die Lupe.

Geordnete Listen (Ordered Lists)

Eine geordnete HTML-Liste zeichnet sich durch Inhalte und aufgelistete Elemente aus, die Sie durch eine aufsteigende alphanumerische Reihenfolge in einer gewünschten Hierarchie ordnen und strukturieren. Der Vorteil liegt in der klaren und durchdachten Abfolge von Informationen. Hierzu kommen zum einen das öffnende HTML-Tag <ol>, das schließende Tag </ol> sowie mehrere <li>…</li>-Punkte für die verschiedenen Listeneinträge zum Einsatz. Geordnete Listen eignen sich beispielsweise dazu, Ranglisten, Schritt-für-Schritt-Anleitungen oder Auflistungen von Fragen darzustellen.

Die Syntax von geordneten Listen sieht folgendermaßen aus:

<ol>
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt</li>
<li>Dritter Listenpunkt</li>
<li>Vierter Listenpunkt</li>
<li>…</li>
</ol>

Der Output sieht folgendermaßen aus:

Ungeordnete Listen (Unordered Lists)

Bei einer ungeordneten HTML-Liste verzichten Sie auf eine alphanumerische Reihenfolge der Listenelemente. Stattdessen kommen bei ungeordneten Listen Aufzählungssymbole wie Bulletpoints, Striche, Pfeile oder Häkchen zum Einsatz. Auf diese Weise lassen sich Inhalte strukturiert aufbereiten, ohne sie hierarchisch zu ordnen. Typische Inhalte sind zum Beispiel die Zutaten von Rezepten, Städte und Länder oder Listen von Namen. Zur Erstellung einer ungeordneten Liste kommen das öffnende HTML-Tag <ul>, das schließende Tag </ul> und mehrere <li>…</li>-Punkte zum Einsatz.

Die Syntax ungeordneter Listen gestaltet sich wie folgt:

<ul>
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt</li>
<li>Dritter Listenpunkt</li>
<li>Vierter Listenpunkt</li>
<li>…</li>
</ul>

Definitionslisten (Description Lists)

Mit einer Definitionsliste können Sie ausgewählte Begriffe und ihre zugehörige Definition, Erklärung oder Beschreibung in strukturierter Form auflisten. Diese Art von HTML Lists wird insbesondere für Glossare, Produktlisten und FAQs genutzt. Für die Erstellung einer Definitionsliste verwenden Sie die folgenden drei Komponenten:

• <dl>…</dl>: Steht für „Definition List“; kennzeichnet Anfang und das Ende des Listenelements
• <dt>…</dt>: Steht für „Definition Term“ (dt); kennzeichnet den Begriff, den es zu erklären gilt
• <dd>…</dd>: Steht für „Definition Description“ (dd); kennzeichnet die Beschreibung, Definition oder Erklärung des zugehörigen Begriffs und folgt unmittelbar auf das <dt>-Tag.

HTML-Definitionslisten erstellt man auf der Grundlage folgender Syntax:

<dl>
<dt>Begriff 1</dt>
<dd>Beschreibung oder Definition von Begriff 1</dd>
<dt>Begriff 2</dt>
<dd>Beschreibung oder Definition von Begriff 2</dd>
<dt>Begriff 3</dt>
<dd>Beschreibung oder Definition von Begriff 3</dd>
<dt>…</dt>
<dd>…</dd>
</dl>

Anwendungsbereiche von HTML-Listen im Überblick

Die Anwendungsbereiche und Einsatzmöglichkeiten der verschiedenen Tags für eine HTML-Liste im Überblick:

Warum man HTML-Listen nutzen sollte

Mit einer HTML-Liste sorgen Sie für mehr Effizienz und Strukturierung bei der Vermittlung von Seiteninhalten und Informationen. Zu den Vorteilen von Listen zählen:

• Mehr Strukturierung, Übersichtlichkeit und Organisation von Informationen
• Mehr Abwechslung und bessere Bewertung durch Suchmaschinen dank abwechslungsreichen Seitenelementen
• Optimierte Barrierefreiheit und klare semantische Strukturierung von Seiten für eine bessere Lesbarkeit
• Individuelle visuelle Aufbereitung von Seiteninhalten unter anderem in Verbindung mit CSS-Styling