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-<ul>-Tag sind das Listen-Tag <li> 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 <ul> einbinden, wobei ein einleitendes <ul> den Startpunkt und ein schließendes </ul> den Endpunkt der Liste markieren. Die verschiedenen Elemente innerhalb einer unsortierten Liste zeichnet man jeweils mit dem HTML-Lists-Tag <li> aus, wobei es keine Beschränkung für die Anzahl an Punkten gibt.

HTML-<ul>-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, 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-<ul>-Tag

Wenn Sie in HTML eine Unordered List einbinden möchten, können Sie dies an beliebiger Stelle im <body>-Bereich Ihrer Webseiten erledigen. Wie bereits erwähnt dienen ein einleitendes (<ul>) und ein schließendes (</ul>) Tag als Markierungen für den Start und das Ende der Auflistung, während Sie die einzelnen Listenpunkte mit einleitendem <li> und schließendem </li> definieren. Die Basis-Syntax von HTML <ul> sieht also folgendermaßen aus:

<body>
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
<li>…</li>
</ul>
</body>
html

Da in diesem Fall keine spezifischen Angaben für das Listensymbol gemacht wurden, nutzt HTML das Standardsymbol „Bullet“, also den typischen zentrierten Punkt.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

Verschachtelte HTML Unsorted Lists

Obwohl Sie hierarchisch aufgebaute Listen in HTML typischerweise mit Ordered Lists umsetzen, bietet auch HTML <ul> die Möglichkeit, Listenelemente strukturell unterzuordnen. Für solche verschachtelten Listen binden Sie einfach weitere HTML Unordered Lists innerhalb eines bestehenden <ul>-Elements ein wie in folgendem Beispiel mit zwei untergeordneten Listen:

<body>
<p><strong>Verschachtelte ungeordnete Liste:</strong></p>
<ul>
    <li>Früchte
        <ul>
            <li>Äpfel
                <ul>
                    <li>Granny Smith</li>
                    <li>Gala</li>
                    <li>Fuji</li>
                </ul>
            </li>
            <li>Orangen
                <ul>
                    <li>Navel</li>
                    <li>Blutorange</li>
                    <li>Mandarine</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
html

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:

verschachtelte-ul-beispiel.png
Im Beispiel kommen gleich drei verschiedene `
    `-Elemente zum Einsatz.

<ul>-Listensymbole mit list-style-type anpassen (mit Beispielen)

Mithilfe der CSS-Eigenschaft list-style-type, die über das HTML-Attribut 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:

<body>
<p><strong>Äpfel:</strong></p>
<ul style="list-style-type:circle;">
    <li>Granny Smith</li>
    <li>Gala</li>
    <li>Fuji</li>
</ul>
</body
html
Hinweis

Für eine umfassendere Gestaltung und Wiederverwendbarkeit empfiehlt es sich, CSS separat in einer Datei oder im <style>-Tag im <head>-Bereich zu definieren. Dies sorgt für eine klare Trennung von Inhalt und Stil und erleichtert die Wartung des Codes.

War dieser Artikel hilfreich?