<ul>

Zuletzt aktualisiert am 30. Januar 2026

Listen sind überall im Web: Navigationsmenüs, Feature-Aufzählungen, Einkaufslisten, Zutatenlisten. Das <ul>-Element (Unordered List) erstellt eine ungeordnete Liste — eine Aufzählung, bei der die Reihenfolge der Einträge keine Rolle spielt. Wenn du eine Webseite baust, wirst du <ul> ständig verwenden. Auf dieser Seite lernst du, wie du Listen richtig einsetzt, wann du <ul> statt <ol> verwendest und wie du sogar Navigationen damit baust.

Grundlagen

Eine ungeordnete Liste ist mehr als nur ein paar Punkte mit Aufzählungszeichen. Für den Browser — und besonders für Screenreader — hat eine <ul> eine klare Bedeutung: “Hier kommt eine Gruppe zusammengehöriger Einträge, deren Reihenfolge austauschbar ist.” Ein Screenreader liest zum Beispiel an: “Liste mit 4 Einträgen”, bevor er die einzelnen Punkte vorliest. Das gibt blinden Nutzern sofort eine Orientierung, wie viel Inhalt kommt.

• <ul> ist ein Block-Element und beginnt auf einer neuen Zeile
• Direkte Kindelemente müssen <li>-Elemente sein — nichts anderes darf direkt in <ul> stehen
• Standardmäßig zeigt der Browser Aufzählungszeichen (Bullets) an, die du mit CSS anpassen oder entfernen kannst
• Listen können verschachtelt werden: Eine <ul> innerhalb eines <li> erzeugt eine Unterliste
• <ul> ist auch der Baustein für Navigationen — das Muster <nav> > <ul> > <li> > <a> ist Standard im modernen Web

Wann <ul>, wann <ol>?

Die Faustregel ist einfach: Wenn du die Einträge umsortieren könntest und der Sinn gleich bleibt, nimm <ul>. Wenn die Reihenfolge wichtig ist, nimm <ol>.

• <ul> (ungeordnet): Zutaten, Features, Navigationspunkte, Tags
• <ol> (geordnet): Schritt-für-Schritt-Anleitungen, Ranglisten, Platzierungen

Syntax

<ul>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ul>

Beispiele

Einfache Einkaufsliste

Das klassische Beispiel — eine Einkaufsliste, bei der es keine Rolle spielt, ob du zuerst Milch oder Brot kaufst:

<h4>Einkaufsliste</h4>
<ul>
  <li>Milch</li>
  <li>Brot</li>
  <li>Butter</li>
  <li>Eier</li>
</ul>

Navigation mit <ul>

Eins der häufigsten Muster im Web: Eine Navigation baust du mit <nav>, <ul>, <li> und <a>. Die Liste entfernt ihre Bullets per CSS und wird horizontal oder vertikal dargestellt:

<nav>
  <ul style="list-style: none; display: flex; gap: 16px;">
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

Verschachtelte Liste

Wenn du Kategorien mit Unterpunkten darstellen willst, verschachtelst du einfach eine <ul> innerhalb eines <li>. Der Browser rückt die Unterliste automatisch ein und wechselt das Aufzählungszeichen:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>Go</li>
    </ul>
  </li>
  <li>Datenbanken
    <ul>
      <li>PostgreSQL</li>
      <li>MongoDB</li>
    </ul>
  </li>
</ul>

Benutzerdefinierte Listenstile mit CSS

Du kannst die Standard-Bullets mit CSS komplett anpassen oder entfernen. Hier ein Beispiel mit Emojis als Listenpunkten:

<ul style="list-style-type: none; padding-left: 0;">
  <li>✅ HTML gelernt</li>
  <li>✅ CSS gelernt</li>
  <li>⬜ JavaScript lernen</li>
  <li>⬜ React lernen</li>
</ul>

Barrierefreiheit

Screenreader kündigen eine <ul> als “Liste mit X Einträgen” an, bevor sie die einzelnen Punkte vorlesen. Das gibt Nutzern sofort eine Vorstellung davon, wie viel Inhalt kommt und ob sie die Liste überspringen möchten. Deshalb ist es wichtig, Listen semantisch korrekt zu verwenden — ein <div> mit visuellen Aufzählungszeichen wird von Screenreadern nicht als Liste erkannt.

Bei verschachtelten Listen kommuniziert der Screenreader die Hierarchie-Ebene, sodass Nutzer verstehen, dass sie sich in einer Unterliste befinden. Vermeide allerdings zu tiefe Verschachtelungen (mehr als drei Ebenen), da die Navigation sonst unübersichtlich wird.

Wenn du list-style: none in CSS setzt, entfernt Safari in VoiceOver die Listen-Semantik. Das ist ein bekanntes Problem. Du kannst es mit role="list" auf dem <ul>-Element lösen, wenn die Listen-Semantik für den Kontext wichtig ist.

Häufige Fehler

• Direkte Kinder müssen <li> sein: Wenn du <ul><div>...</div></ul> schreibst, ist das ungültiges HTML. Der Browser versucht es zu reparieren, aber das Ergebnis ist unvorhersehbar. Nur <li> darf direkt in <ul> stehen — andere Elemente gehören innerhalb der <li>-Elemente.

• <ul> für geordnete Daten: Wenn die Reihenfolge deiner Einträge eine Bedeutung hat (z.B. “Schritt 1, Schritt 2, Schritt 3” einer Anleitung), verwende <ol> statt <ul>. Das ist nicht nur semantisch korrekter, sondern gibt Screenreadern auch die Information, dass es eine nummerierte Abfolge ist.

• Leere Listen: Eine <ul> ohne <li>-Elemente ist zwar technisch erlaubt, aber sinnlos und kann bei Screenreadern für Verwirrung sorgen. Wenn du eine Liste dynamisch befüllst und sie leer sein kann, blende den gesamten <ul>-Block aus, statt eine leere Liste zu rendern.

• Liste nur für Styling: Verwende <ul> nur, wenn du tatsächlich eine Aufzählung zusammengehöriger Punkte hast. Wenn du lediglich Elemente untereinander darstellen willst, nutze Flexbox oder Grid auf einem <div>.

Browser-Kompatibilität

Das ul-Element wird von allen Browsern seit den Anfängen des Webs vollständig unterstützt. Auch CSS-Anpassungen wie list-style-type oder list-style: none funktionieren überall zuverlässig.

Email-Kompatibilität

Ungeordnete Listen werden in den meisten Email-Clients unterstützt, allerdings mit Einschränkungen bei Margins und Padding in Outlook.

Verwandte Elemente