Listen richtig nutzen: ul, ol & dl

Listen gehören zu den am häufigsten gebrauchten – und am häufigsten missbrauchten – Strukturen im Web. Dabei ist die Sache eigentlich klar: HTML kennt drei Listentypen, jeder mit einer eigenen Bedeutung. Wer sie passend einsetzt, gibt zusammengehörigen Einträgen eine sichtbare und eine maschinenlesbare Struktur.

Die drei Listentypen

<ul> – ungeordnete Liste

Für Aufzählungen, bei denen die Reihenfolge keine Rolle spielt: Merkmale, Vorteile, eine Sammlung von Links.

<ul>
  <li>Wahrnehmbar</li>
  <li>Bedienbar</li>
  <li>Verständlich</li>
  <li>Robust</li>
</ul>

<ol> – geordnete Liste

Wenn die Reihenfolge Bedeutung trägt: Arbeitsschritte, Rangfolgen, nummerierte Anleitungen.

<ol>
  <li>Semantisch auszeichnen</li>
  <li>Mit CSS gestalten</li>
  <li>Mit Tastatur testen</li>
</ol>

<dl> – Beschreibungsliste

Für Paare aus Begriff und Erläuterung: Glossare, Metadaten, Eigenschaften. <dt> ist der Begriff, <dd> die Beschreibung.

<dl>
  <dt>HTML</dt>
  <dd>Auszeichnungssprache für die Struktur von Webseiten.</dd>
  <dt>CSS</dt>
  <dd>Sprache zur Gestaltung dieser Struktur.</dd>
</dl>

Die <dl> wird oft vergessen. Für Schlüssel-Wert-Paare – etwa die Eckdaten eines Beitrags – nutze ich sie gern, weil sie die Beziehung „Begriff ↔ Erklärung“ sauber abbildet.

Warum echte Listen besser sind als nachgebaute

Technisch könntest du eine Aufzählung auch mit Absätzen und Bindestrichen „malen“. Semantisch fehlt dann aber die entscheidende Information: dass es sich um eine zusammengehörige Liste mit einer bestimmten Anzahl an Einträgen handelt.

<!-- Nachgebaut: optisch eine Liste, semantisch nur Text -->
<p>– Wahrnehmbar<br />– Bedienbar<br />– Verständlich</p>

<!-- Echte Liste: Struktur ist vorhanden -->
<ul>
  <li>Wahrnehmbar</li>
  <li>Bedienbar</li>
  <li>Verständlich</li>
</ul>

Der Unterschied wird hörbar und auswertbar: Ein Screenreader kündigt „Liste mit 3 Einträgen“ an und nummeriert beim Vorlesen mit. Auch Maschinen erkennen die Einträge als zusammengehörige Aufzählung.

Randnotiz – mehr als nur Screenreader. Dieselbe Listenstruktur lesen auch Web-Crawler (Suchmaschinen wie Googlebot) und KI-Crawler (etwa GPTBot oder ClaudeBot). Beide extrahieren aus <ul>/<ol> saubere, abgegrenzte Einträge – ideal etwa für Schritt-für-Schritt-Anleitungen oder Merkmalslisten, die in Suchergebnissen oder KI-Antworten auftauchen sollen. Eine echte Liste ist damit auch eine Investition in die Auffindbarkeit.

Listen in der Navigation

Navigationslinks gehören in eine Liste innerhalb von <nav>. So ist sofort klar, wie viele Einträge das Menü hat – eine Information, die bei reinen Link-Reihen fehlt:

<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="/index.html">Start</a></li>
    <li><a href="/blog.html">Blog</a></li>
  </ul>
</nav>

Mehr zu Navigationsbereichen findest du unter Struktur-Elemente: header, nav, main & footer.

Verschachtelung

Listen lassen sich verschachteln – die Unterliste gehört dabei in das jeweilige <li>, nicht daneben:

<ul>
  <li>
    Semantisches HTML
    <ul>
      <li>Struktur-Elemente</li>
      <li>Textauszeichnung</li>
    </ul>
  </li>
  <li>Barrierefreie Komponenten</li>
</ul>

Häufige Fehler

• Listen mit <br> und Bindestrichen nachbauen, statt <ul>/<ol> zu nutzen.
• Reihenfolge ignorieren: <ul> für Schritte, bei denen die Folge zählt.
• Unterliste falsch verschachteln (neben dem <li> statt darin).
• Nur fürs Layout in Listen verpacken, was inhaltlich keine Liste ist.
• <dl> übersehen, wo Begriff-Beschreibung-Paare genau passen würden.

Häufige Fragen

<ul> oder <ol> – woran entscheide ich?

Frag dich, ob die Reihenfolge Bedeutung trägt. Würde ein Vertauschen der Einträge den Sinn verändern (z. B. bei Arbeitsschritten), nimm <ol>. Sonst <ul>.

Darf ich Listen ohne Aufzählungszeichen darstellen?

Ja. Das Aufzählungszeichen entfernst du per CSS (list-style: none), die Semantik der Liste bleibt erhalten. Genau so funktionieren die meisten Menüs.

Fazit

Drei Listentypen, drei Bedeutungen: <ul> für Sammlungen ohne feste Reihenfolge, <ol> für geordnete Abläufe, <dl> für Begriff-Erklärungs-Paare. Eine echte Liste kostet keinen Mehraufwand, liefert aber Struktur für Menschen und Maschinen. Wie sich dieses Prinzip durch die gesamte Auszeichnung zieht, zeigt Was ist semantisches HTML?.