Listen

Zuletzt geprüft am 14. September 2026 von Daniel Weihmann

Eine Liste ist mehr als ein Absatz mit Punkten davor. Ein Screenreader kündigt sie an („Liste mit sechs Einträgen"), er kann sie überspringen, und er sagt bei jedem Eintrag, der wievielte es ist. Das alles entfällt, wenn jemand die Punkte mit Bindestrichen in ein <p> tippt.

Welche Liste wofür

Drei Listentypen kennt HTML, und die Wahl ist keine Geschmacksfrage: Sie sagt aus, in welchem Verhältnis die Einträge zueinander stehen.

<ul>: Ungeordnete Liste. Die Reihenfolge ist beliebig, man könnte die Einträge mischen, ohne dass sich die Aussage ändert. Zutaten, Merkmale, Vorteile.
<ol>: Geordnete Liste. Die Reihenfolge trägt Bedeutung: Arbeitsschritte, eine Rangfolge, eine Chronologie. Wenn Schritt drei vor Schritt zwei nicht funktioniert, ist es eine ol.
<dl>: Beschreibungsliste. Paare aus Begriff und Erklärung. Nicht nur für Glossare, siehe unten.

In <ul> und <ol> darf als direktes Kind nur <li> stehen. Ein <div> oder ein <p> zwischen den Einträgen ist ungültig. Innerhalb eines <li> ist dagegen fast alles erlaubt, auch Absätze, Bilder und weitere Listen.

<ul>
  <li>Erster Eintrag</li>
  <li>
    <p>Zweiter Eintrag mit Absatz</p>
    <p>und noch einem.</p>
  </li>
</ul>

Nummerierung steuern

Bei <ol> lässt sich die Zählung anpassen, ohne die Zahlen von Hand zu schreiben. Wer sie hart hineintippt, verliert genau das, was die Liste ausmacht.

start: Beginnt bei einem anderen Wert: <ol start="7"> zählt ab sieben. Nützlich, wenn eine Liste durch einen Zwischentext unterbrochen wird.
reversed: Zählt rückwärts. Für Ranglisten, die mit dem letzten Platz beginnen.
type: 1 (Vorgabe), a, A, i, I. Das ist eine inhaltliche Angabe, keine reine Optik: Wer im Text auf „Absatz ii" verweist, braucht römische Ziffern auch im Ausdruck und beim Kopieren. Reine Gestaltung gehört dagegen in CSS (list-style-type).
value: Am einzelnen <li>: setzt die Zählung dort neu. <li value="10"> macht den Eintrag zur Nummer zehn, die folgenden zählen ab elf weiter.

Definitionslisten sind unterschätzt

Die <dl> gilt vielen als Glossar-Element, sie ist aber für jedes Begriff-Erklärung-Paar richtig: technische Daten, Öffnungszeiten, Metaangaben eines Artikels, die Attribute auf dieser Seite. Ein <dt> darf mehrere <dd> haben und umgekehrt.

<dl>
  <dt>Erscheinungsjahr</dt>
  <dd>2026</dd>

  <dt>Sprache</dt>
  <dd>Deutsch</dd>
  <dd>Englisch</dd>
</dl>

Zum Gruppieren eines Paares ist seit HTML5.2 ein <div> zwischen <dl> und den Paaren erlaubt – der einzige Fall, in dem ein anderes Element als dt und dd direkt in einer dl stehen darf. Das hilft, wenn jedes Paar eine eigene Box bekommen soll.

Kein Dialog. Für einen Wortwechsel zwischen Personen war die dl früher ein verbreiteter Missbrauch. Der HTML-Standard schließt das ausdrücklich aus; dafür sind Absätze mit <b> oder <cite> für den Sprechernamen gedacht.

Verschachteln

Eine Unterliste gehört in das <li>, zu dem sie gehört, nicht daneben. Das ist der häufigste Verschachtelungsfehler, und er fällt optisch kaum auf, weil Browser ihn stillschweigend reparieren.

So

<ul>
  <li>Obst
    <ul>
      <li>Apfel</li>
    </ul>
  </li>
</ul>

Nicht so

<ul>
  <li>Obst</li>
  <ul>
    <li>Apfel</li>
  </ul>
</ul>

Rechts steht die <ul> als direktes Kind einer <ul>. Das ist ungültig, der Validator meldet es, und die Zuordnung „Apfel gehört zu Obst" geht für Screenreader verloren.

Darstellung

Aufzählungszeichen und Einzug sind CSS-Sache. Zwei Punkte, die in der Praxis immer wieder auffallen:

list-style: none nimmt Safari die Liste weg. Ohne Aufzählungszeichen meldet VoiceOver sie unter Umständen nicht mehr als Liste. Wer die Punkte entfernt, setzt deshalb role="list" an die <ul> – eine der wenigen ARIA-Angaben, die sich wirklich lohnen.
Eigene Zähler statt Handarbeit. Verschachtelte Nummern wie „2.1.3" erzeugt CSS mit counter-reset und counter-increment. Im Markup bleibt eine saubere <ol>.

Häufige Fehler

Absätze mit Bindestrich als Liste. Sieht gleich aus, ist aber keine. Der Screenreader kündigt nichts an, und die Einträge lassen sich nicht überspringen.
Handgeschriebene Zahlen in einer ul. Wenn die Reihenfolge zählt, ist es eine ol. Sonst stimmt die Nummerierung spätestens nach dem dritten Einschub nicht mehr.
Eine Liste mit genau einem Eintrag. Gültig, aber fast immer ein Zeichen dafür, dass hier ein Absatz stehen sollte. Die Ankündigung „Liste mit einem Eintrag" hilft niemandem.
Navigation ohne Liste. Eine Reihe von Links im <nav> gehört in eine <ul>. So erfährt man vorab, wie viele Punkte kommen.
Leere <li> als Abstand. Abstand ist margin, kein Inhalt.