PUR

HTML: Aufzählungen erstellen

Aufzählungen und Listen sind allgegenwärtig. Ob als To-do-Liste oder Element auf Webseiten. HTML unterscheidet zwei Arten von Aufzählungslisten: Sortierte und unsortierte. Wie Sie die Listen verwenden und wie diese mithilfe von HTML verschaltet werden können, erfahren Sie in diesem Beitrag.

So erstellen Sie eine unsortierte Liste mit HTML

Das Element "ul" in HTML steht für unordered list und bedeutet übersetzt ungeordnete, unsortierte Liste. Diese Art von Listen wird verwendet, wenn die Reihenfolge nur eine sekundäre Rolle spielt. Ein Beispiel wäre eine To-do-Liste, die eine einfache Aufzählung darstellt. In grafischen Browsern wird die unsortierte Liste automatisch in sogenannte Bullet-Points als Aufzählungszeichen umgewandelt. Andere Aufzählungszeichen lassen sich via CSS formatieren. Aufzählungslisten eignen sich zum Beispiel, um Navigationsleisten in Webseiten zu strukturieren.

Eine ungeordnete Liste beginnt mit dem <ul>-Tag. Jedes Listenelement beginnt mit dem <li>-Tag - "li" steht für list item also Listeneintrag. Respektive beendet </li> den Listeneintrag und </ul> die Liste.

Möchten Sie nun eine unsortierte Liste im Quelltext einfügen sieht das Ganze wie folgt aus:

<ul>
<li>Newsticker</li>
<li>Menü</li>
<li>heise tipps+tricks</li>
<li>Themenvorschläge</li>
</ul>

Das Verschachteln von Listen ist auch problemlos möglich. Dazu fügen Sie zwischen <li> und </li> eine weitere Listenebene ein. Auch andere Listentypen wie die sortierte Liste sind dabei erlaubt:

<ul>
<li>Newsticker
<ul>
<li>Aktuelle News</li>
<li>News 2020</li>
</ul>

</li>
<li>Menü</li>
<li>heise tipps+tricks</li>

<li>Themenvorschläge</li>
</ul>

So erstellen Sie eine sortierte Liste mit HTML

Ist die Reihenfolge von Bedeutung, müssen Sie eine sortierte Liste als Element einfügen. Dazu wählen Sie anstelle von "ul" das Pendant "ol" - ordered list (geordnete bzw. sortierte Liste). Beispiele sind unsere Kurzanleitungen oder Listen, die Schritt-für-Schritt abgearbeitet werden müssen. Auch hier ist der Listeneintrag wieder mit dem <li>-Tag eingeschlossen.

<ol>
<li>Paket aufschneiden</li>
<li>Paket öffnen</li>
<li>Inhalt entnehmen</li>
</ol>

Hinweis: Sie können zwar auch sortierte Listen verschachteln, die Nummerierungsebenen haben aber keine Hierarchie wie z.B. 1.1 oder 1.1.1. Dazu sind Formatierungen mittels CSS nötig.

Nummerierung der sortierten Liste ändern

Möchten Sie, dass Ihre Liste mit einem anderen Startwert im Browser angezeigt wird, dann lässt sich das Start-Attribut des ol-Elementes anpassen. Soll der erste Listeneintrag mit 5 starten, wird entsprechendes Start-Attribut gesetzt:

<ol start="5">
<li>Diese Liste beginnt mit fünf</li>
<li>Eintrag</li>
<li>Noch ein Eintrag</li>
</ol>

Mehr zum Thema: