HTML-Liste: Auf­zäh­lun­gen mit li-, ol- und ul-Tag

HTML Lists prä­sen­tie­ren aus­ge­wähl­te In­for­ma­tio­nen und Elemente in einem HTML-Dokument in Lis­ten­form. Je nach Bedarf kann es sich hierbei um eine geordnete Liste, eine un­ge­ord­ne­te Liste oder eine De­fi­ni­ti­ons­lis­te handeln. Für die Er­stel­lung kommen die HTML-Tags <li>, <ol>, <ul> und <dl> zur Anwendung.

Was sind HTML Lists?

HTML-Listen kommen in HTML zum Einsatz, um In­for­ma­tio­nen und Text­ele­men­te in einer struk­tu­rier­ten und über­sicht­li­chen Lis­ten­form dar­zu­stel­len. Je nach Bedarf lassen sich Inhalte als geordnete Liste mit Num­me­rie­rung oder auch als un­ge­ord­ne­te Liste gestalten. Mit De­fi­ni­ti­ons­lis­ten gibt es darüber hinaus seit HTML5 eine dritte Variante, die speziell für die Zuordnung von Begriffen und ihrer Be­schrei­bung geeignet ist.

HTML Lists bilden ein we­sent­li­ches Element für die ab­wechs­lungs­rei­che und klare Ge­stal­tung von Websites, um für eine präzise, schnelle und klare Ver­mitt­lung von In­for­ma­tio­nen oder Inhalten zu sorgen. Das gilt sowohl für eine einfache Auf­zäh­lung, für eine auf­stei­gen­de Num­me­rie­rung von In­for­ma­tio­nen oder für über­sicht­lich und de­tail­liert prä­sen­tier­te De­fi­ni­tio­nen.

Welche Arten von HTML Lists gibt es?

Listen lassen sich in HTML-Do­ku­men­ten, wie bereits erwähnt, in ver­schie­de­nen Formen dar­stel­len. Während geordnete und un­ge­ord­ne­te Listen sehr häufig Anwendung finden und quasi auf keiner Webseite fehlen dürfen, sind De­fi­ni­ti­ons­lis­ten, die auch De­scrip­ti­on Lists genannt werden, deutlich seltener im Einsatz. In den nach­fol­gen­den Ab­schnit­ten nehmen wir die ver­schie­de­nen 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 auf­ge­lis­te­te Elemente aus, die Sie durch eine auf­stei­gen­de al­pha­nu­me­ri­sche Rei­hen­fol­ge in einer ge­wünsch­ten Hier­ar­chie ordnen und struk­tu­rie­ren. Der Vorteil liegt in der klaren und durch­dach­ten Abfolge von In­for­ma­tio­nen. Hierzu kommen zum einen das öffnende HTML-Tag <ol>, das schlie­ßen­de Tag </ol> sowie mehrere <li>…</li>-Punkte für die ver­schie­de­nen Lis­ten­ein­trä­ge zum Einsatz. Geordnete Listen eignen sich bei­spiels­wei­se dazu, Rang­lis­ten, Schritt-für-Schritt-An­lei­tun­gen oder Auf­lis­tun­gen von Fragen dar­zu­stel­len.

Die Syntax von ge­ord­ne­ten Listen sieht fol­gen­der­ma­ß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 fol­gen­der­ma­ßen aus:

Close

Un­ge­ord­ne­te Listen (Unordered Lists)

Bei einer un­ge­ord­ne­ten HTML-Liste ver­zich­ten Sie auf eine al­pha­nu­me­ri­sche Rei­hen­fol­ge der Lis­ten­ele­men­te. Statt­des­sen kommen bei un­ge­ord­ne­ten Listen Auf­zäh­lungs­sym­bo­le wie Bul­let­points, Striche, Pfeile oder Häkchen zum Einsatz. Auf diese Weise lassen sich Inhalte struk­tu­riert auf­be­rei­ten, ohne sie hier­ar­chisch zu ordnen. Typische Inhalte sind zum Beispiel die Zutaten von Rezepten, Städte und Länder oder Listen von Namen. Zur Er­stel­lung einer un­ge­ord­ne­ten Liste kommen das öffnende HTML-Tag <ul>, das schlie­ßen­de Tag </ul> und mehrere <li>…</li>-Punkte zum Einsatz.

Die Syntax un­ge­ord­ne­ter 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>

Close

De­fi­ni­ti­ons­lis­ten (De­scrip­ti­on Lists)

Mit einer De­fi­ni­ti­ons­lis­te können Sie aus­ge­wähl­te Begriffe und ihre zu­ge­hö­ri­ge De­fi­ni­ti­on, Erklärung oder Be­schrei­bung in struk­tu­rier­ter Form auflisten. Diese Art von HTML Lists wird ins­be­son­de­re für Glossare, Pro­dukt­lis­ten und FAQs genutzt. Für die Er­stel­lung einer De­fi­ni­ti­ons­lis­te verwenden Sie die folgenden drei Kom­po­nen­ten:

• <dl>…</dl>: Steht für „De­fi­ni­ti­on List“; kenn­zeich­net Anfang und das Ende des Lis­ten­ele­ments
• <dt>…</dt>: Steht für „De­fi­ni­ti­on Term“ (dt); kenn­zeich­net den Begriff, den es zu erklären gilt
• <dd>…</dd>: Steht für „De­fi­ni­ti­on De­scrip­ti­on“ (dd); kenn­zeich­net die Be­schrei­bung, De­fi­ni­ti­on oder Erklärung des zu­ge­hö­ri­gen Begriffs und folgt un­mit­tel­bar auf das <dt>-Tag.

HTML-De­fi­ni­ti­ons­lis­ten 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>

Close

An­wen­dungs­be­rei­che von HTML-Listen im Überblick

Die An­wen­dungs­be­rei­che und Ein­satz­mög­lich­kei­ten der ver­schie­de­nen 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 Struk­tu­rie­rung bei der Ver­mitt­lung von Sei­ten­in­hal­ten und In­for­ma­tio­nen. Zu den Vorteilen von Listen zählen:

• Mehr Struk­tu­rie­rung, Über­sicht­lich­keit und Or­ga­ni­sa­ti­on von In­for­ma­tio­nen
• Mehr Ab­wechs­lung und bessere Bewertung durch Such­ma­schi­nen dank ab­wechs­lungs­rei­chen Sei­ten­ele­men­ten
• Op­ti­mier­te Bar­rie­re­frei­heit und klare se­man­ti­sche Struk­tu­rie­rung von Seiten für eine bessere Les­bar­keit
• In­di­vi­du­el­le visuelle Auf­be­rei­tung von Sei­ten­in­hal­ten unter anderem in Ver­bin­dung mit CSS-Styling