Eine HTML Unordered List gibt Ihnen die Mög­lich­keit, Inhalte Ihrer Webseiten in einer über­sicht­li­chen Weise ohne Num­me­rie­rung auf­zu­lis­ten. Relevante Elemente neben dem grund­le­gen­den 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. un­ge­ord­ne­te Listen) sind HTML-Elemente, die für die Er­stel­lung von Auf­lis­tun­gen verwendet werden, bei denen die Rei­hen­fol­ge der einzelnen Lis­ten­ele­men­te keine Rolle spielt. Die prak­ti­schen Listen lassen sich mithilfe des HTML-Tags <ul> einbinden, wobei ein ein­lei­ten­des <ul> den Start­punkt und ein schlie­ßen­des </ul> den Endpunkt der Liste markieren. Die ver­schie­de­nen Elemente innerhalb einer un­sor­tier­ten Liste zeichnet man jeweils mit dem HTML-Lists-Tag <li> aus, wobei es keine Be­schrän­kung für die Anzahl an Punkten gibt.

HTML-<ul>-Listen eignen sich für die struk­tu­rier­te Dar­stel­lung ver­schie­dens­ter Inhalte wie zum Beispiel der folgenden:

  • Klas­si­sche To-do-Listen: Check­lis­ten, Zu­ta­ten­lis­ten, Auf­ga­ben­lis­ten
  • Funk­tio­nen: Auf­lis­tung von Produkt-Features oder Leis­tungs­merk­ma­len
  • Links: Auf­lis­tung von Links zu externen Seiten oder Social-Media-Profilen
  • Tags: Liste von beliebten Schlag­wör­tern
  • Preis­lis­ten: Prä­sen­ta­ti­on der Preise von Dienst­leis­tun­gen bzw. Produkten in Lis­ten­form
  • Termine: Struk­tu­rier­te Dar­stel­lung an­ste­hen­der Termine
Tipp

Das Ge­gen­stück zu un­sor­tier­ten HTML-Auf­lis­tun­gen sind HTML Ordered Lists, also sortierte HTML-Listen. Diese zeichnen sich dadurch aus, dass die einzelnen Lis­ten­punk­te num­me­riert sind und damit einer klaren Hier­ar­chie un­ter­lie­gen.

Syntax: So funk­tio­niert das HTML-<ul>-Tag

Wenn Sie in HTML eine Unordered List einbinden möchten, können Sie dies an be­lie­bi­ger Stelle im <body>-Bereich Ihrer Webseiten erledigen. Wie bereits erwähnt dienen ein ein­lei­ten­des (<ul>) und ein schlie­ßen­des (</ul>) Tag als Mar­kie­run­gen für den Start und das Ende der Auf­lis­tung, während Sie die einzelnen Lis­ten­punk­te mit ein­lei­ten­dem <li> und schlie­ßen­dem </li> de­fi­nie­ren. Die Basis-Syntax von HTML <ul> sieht also fol­gen­der­ma­ß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 spe­zi­fi­schen Angaben für das Lis­ten­sym­bol gemacht wurden, nutzt HTML das Stan­dard­sym­bol „Bullet“, also den typischen zen­trier­ten Punkt.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

Ver­schach­tel­te HTML Unsorted Lists

Obwohl Sie hier­ar­chisch auf­ge­bau­te Listen in HTML ty­pi­scher­wei­se mit Ordered Lists umsetzen, bietet auch HTML <ul> die Mög­lich­keit, Lis­ten­ele­men­te struk­tu­rell un­ter­zu­ord­nen. Für solche ver­schach­tel­ten Listen binden Sie einfach weitere HTML Unordered Lists innerhalb eines be­stehen­den <ul>-Elements ein wie in folgendem Beispiel mit zwei un­ter­ge­ord­ne­ten 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 Haupt­ka­te­go­rie „Früchte“ wird so in die Un­ter­ka­te­go­rien „Äpfel“ und „Orangen“ un­ter­glie­dert, in denen wiederum ver­schie­de­ne Sorten auf­ge­lis­tet werden. Für den User im Browser sieht das Ganze dann etwa wie folgt aus:

Bild: Beispiel für eine verschachtelte ungeordnete HTML-Liste
Im Beispiel kommen gleich drei ver­schie­de­ne `
    `-Elemente zum Einsatz.

<ul>-Lis­ten­sym­bo­le mit list-style-type anpassen (mit Bei­spie­len)

Mithilfe der CSS-Ei­gen­schaft list-style-type, die über das HTML-Attribut style oder ein externes Style­sheet an­ge­wen­det werden kann, lassen sich die Lis­ten­sym­bo­le von un­ge­ord­ne­ten Listen in HTML jederzeit anpassen. Auf diese Weise legen Sie bei­spiels­wei­se folgende Symbole fest:

list-style-type-Wert Be­schrei­bung
disc Gefüllter Kreis; HTML-Stan­dard­wahl ohne style-Angabe
circle Un­aus­ge­füll­ter Kreis
square Quadrat
none Kein Lis­ten­sym­bol

Im Code sieht diese ge­stal­te­ri­sche Anpassung dann zum Beispiel fol­gen­der­ma­ßen aus, wenn Sie un­aus­ge­füll­te 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 um­fas­sen­de­re Ge­stal­tung und Wie­der­ver­wend­bar­keit empfiehlt es sich, CSS separat in einer Datei oder im <style>-Tag im <head>-Bereich zu de­fi­nie­ren. Dies sorgt für eine klare Trennung von Inhalt und Stil und er­leich­tert die Wartung des Codes.

Zum Hauptmenü