# HTML ul: Unsortierte Auflistungen in HTML
Eine HTML Unordered List gibt Ihnen die Möglichkeit, Inhalte Ihrer Webseiten in einer übersichtlichen Weise ohne Nummerierung aufzulisten. Relevante Elemente neben dem grundlegenden HTML-`
`-Tag sind das Listen-Tag `
` und das Attribut `type`.
## Was sind HTML Unordered Lists und wofür werden sie genutzt?
HTML Unsorted Lists bzw. Unordered Lists (dt. *ungeordnete Listen*) sind HTML-Elemente, die für die **Erstellung von Auflistungen** verwendet werden, bei denen die Reihenfolge der einzelnen Listenelemente keine Rolle spielt. Die praktischen Listen lassen sich mithilfe des [HTML-Tags](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-tags/) `
` einbinden, wobei ein einleitendes `
` den Startpunkt und ein schließendes `
` den Endpunkt der Liste markieren. Die verschiedenen Elemente innerhalb einer unsortierten Liste zeichnet man jeweils mit dem [HTML-Lists](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-lists/)-Tag `
` aus, wobei es keine Beschränkung für die Anzahl an Punkten gibt.
HTML-`
`-Listen eignen sich für die strukturierte Darstellung verschiedenster Inhalte wie zum Beispiel der folgenden:
- **Klassische To-do-Listen**: Checklisten, Zutatenlisten, Aufgabenlisten
- **Funktionen**: Auflistung von Produkt-Features oder Leistungsmerkmalen
- **Links**: Auflistung von Links zu externen Seiten oder Social-Media-Profilen
- **Tags**: Liste von beliebten Schlagwörtern
- **Preislisten**: Präsentation der Preise von Dienstleistungen bzw. Produkten in Listenform
- **Termine**: Strukturierte Darstellung anstehender Termine
Tipp Das Gegenstück zu unsortierten HTML-Auflistungen sind [HTML Ordered Lists](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-ordered-list/), also sortierte HTML-Listen. Diese zeichnen sich dadurch aus, dass die einzelnen **Listenpunkte nummeriert** sind und damit einer klaren Hierarchie unterliegen.
## Syntax: So funktioniert das HTML-`
`-Tag
Wenn Sie in HTML eine Unordered List einbinden möchten, können Sie dies an beliebiger Stelle im ``-Bereich Ihrer Webseiten erledigen. Wie bereits erwähnt dienen ein einleitendes (`
`) und ein schließendes (`
`) Tag als Markierungen für den Start und das Ende der Auflistung, während Sie die einzelnen Listenpunkte mit einleitendem `
` und schließendem `
` definieren. Die Basis-Syntax von HTML `
` sieht also folgendermaßen aus:
```html
Listenpunkt 1
Listenpunkt 2
Listenpunkt 3
…
hash_f9d915ce72ba3b7086d59f8860aae81f23634f8a
```
Da in diesem Fall keine spezifischen Angaben für das Listensymbol gemacht wurden, nutzt HTML das Standardsymbol „Bullet“, also den typischen zentrierten Punkt.
## Verschachtelte HTML Unsorted Lists
Obwohl Sie hierarchisch aufgebaute Listen in HTML typischerweise mit Ordered Lists umsetzen, bietet auch HTML `
` die Möglichkeit, Listenelemente strukturell unterzuordnen. Für solche verschachtelten Listen binden Sie einfach weitere HTML Unordered Lists innerhalb eines bestehenden `
`-Elements ein wie in folgendem Beispiel mit zwei untergeordneten Listen:
```html
Verschachtelte ungeordnete Liste:
Früchte
Äpfel
Granny Smith
Gala
Fuji
Orangen
Navel
Blutorange
Mandarine
hash_f9d915ce72ba3b7086d59f8860aae81f23634f8a
```
Die Hauptkategorie „Früchte“ wird so in die Unterkategorien „Äpfel“ und „Orangen“ untergliedert, in denen wiederum verschiedene Sorten aufgelistet werden. Für den User im Browser sieht das Ganze dann etwa wie folgt aus:
[](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/verschachtelte-ul-beispiel.png) Im Beispiel kommen gleich drei verschiedene ``-Elemente zum Einsatz.
## `
`-Listensymbole mit `list-style-type` anpassen (mit Beispielen)
Mithilfe der CSS-Eigenschaft `list-style-type`, die über das [HTML-Attribut](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-attribute/) `style` oder ein externes Stylesheet angewendet werden kann, lassen sich die Listensymbole von ungeordneten Listen in HTML jederzeit anpassen. Auf diese Weise legen Sie beispielsweise folgende Symbole fest:
`list-style-type`-Wert
Beschreibung
`disc`
Gefüllter Kreis; HTML-Standardwahl ohne `style`-Angabe
`circle`
Unausgefüllter Kreis
`square`
Quadrat
`none`
Kein Listensymbol
Im Code sieht diese gestalterische Anpassung dann zum Beispiel folgendermaßen aus, wenn Sie unausgefüllte Kreise einsetzen möchten:
```html
Äpfel:
Granny Smith
Gala
Fuji
`-Tag im ``-Bereich zu definieren. Dies sorgt für eine klare Trennung von Inhalt und Stil und erleichtert die Wartung des Codes.
This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/html-unordered-list/](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-unordered-list/) for AI/LLM consumption.