<dl>

Zuletzt aktualisiert am 4. Februar 2026

Das <dl>-Element (Description List) erstellt eine Definitionsliste — eine Sammlung von Begriffs-Beschreibungs-Paaren. Immer wenn du Begriffe und ihre Erklärungen, Metadaten mit Werten oder Frage-Antwort-Paare darstellen willst, ist <dl> das passende Element. Im Gegensatz zu <ul> und <ol> organisiert eine Definitionsliste den Inhalt nicht als einfache Aufzählung, sondern als zusammengehörige Paare aus <dt> (Term) und <dd> (Description).

Grundlagen

Eine Definitionsliste hat eine besondere Struktur: Das <dl>-Element ist der Container, <dt> markiert den Begriff und <dd> liefert die zugehörige Beschreibung. Screenreader kündigen eine <dl> als “Definitionsliste” an und lesen die Paare entsprechend vor, was blinden Nutzern sofort die Struktur vermittelt.

• <dl> ist ein Block-Element und beginnt auf einer neuen Zeile
• Direkte Kinder müssen <dt>- und <dd>-Elemente sein (oder <div>-Wrapper seit HTML5, um Paare zu gruppieren)
• Ein <dt> kann von mehreren <dd> gefolgt werden (ein Begriff mit mehreren Beschreibungen)
• Mehrere <dt> können sich ein <dd> teilen (Synonyme mit einer gemeinsamen Beschreibung)
• Browser rücken <dd> standardmäßig um ca. 40px ein
• <dl> ist nicht für einfache Aufzählungen gedacht — dafür gibt es <ul> und <ol>

Wann <dl>, wann <ul>?

Die Faustregel: Wenn deine Einträge aus Paaren bestehen (Name + Wert, Begriff + Definition, Frage + Antwort), nimm <dl>. Wenn es eine einfache Aufzählung gleichartiger Punkte ist, nimm <ul> oder <ol>.

• <dl>: Glossare, FAQ, Metadaten (Autor/Datum/Kategorie), Spezifikationstabellen
• <ul>: Einkaufslisten, Navigationsmenüs, Feature-Aufzählungen
• <ol>: Anleitungen, Ranglisten, chronologische Abfolgen

Syntax

<dl>
  <dt>HTML</dt>
  <dd>Die Auszeichnungssprache für Webseiten.</dd>

  <dt>CSS</dt>
  <dd>Die Stylesheet-Sprache für das Design von Webseiten.</dd>
</dl>

Beispiele

Glossar mit Webentwicklungs-Begriffen

Der klassische Anwendungsfall: Ein Glossar, in dem Fachbegriffe erklärt werden. Jeder Begriff (<dt>) wird von seiner Definition (<dd>) gefolgt.

<dl>
  <dt>API</dt>
  <dd>Application Programming Interface — eine Schnittstelle,
    über die Programme miteinander kommunizieren können.</dd>

  <dt>DOM</dt>
  <dd>Document Object Model — die Baumstruktur, die der Browser
    aus dem HTML-Code erstellt und die per JavaScript
    manipuliert werden kann.</dd>

  <dt>CDN</dt>
  <dd>Content Delivery Network — ein verteiltes Servernetzwerk,
    das Inhalte geografisch näher am Nutzer ausliefert.</dd>
</dl>

Metadaten-Darstellung

Definitionslisten eignen sich hervorragend für Metadaten — überall dort, wo du Schlüssel-Wert-Paare darstellen willst, etwa auf einer Artikelseite oder einem Produktdatenblatt.

<dl style="display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;">
  <dt>Autor</dt>
  <dd>Mario</dd>

  <dt>Veröffentlicht</dt>
  <dd>4. Februar 2026</dd>

  <dt>Kategorie</dt>
  <dd>HTML Grundlagen</dd>

  <dt>Lesezeit</dt>
  <dd>5 Minuten</dd>
</dl>

FAQ-Struktur

Eine FAQ-Seite lässt sich semantisch korrekt mit einer Definitionsliste abbilden. Die Fragen sind die Begriffe (<dt>), die Antworten die Beschreibungen (<dd>).

<dl>
  <dt>Was ist HTML?</dt>
  <dd>HTML (HyperText Markup Language) ist die
    Standard-Auszeichnungssprache für Webseiten. Sie beschreibt
    die Struktur und den Inhalt einer Seite.</dd>

  <dt>Brauche ich CSS?</dt>
  <dd>CSS ist nicht zwingend nötig, aber ohne CSS sehen
    Webseiten sehr schlicht aus. CSS steuert Farben, Layouts,
    Schriften und das gesamte visuelle Design.</dd>

  <dt>Wo fange ich am besten an?</dt>
  <dd>Starte mit HTML und lerne die grundlegenden Elemente.
    Danach kommt CSS für das Styling, und schließlich
    JavaScript für Interaktivität.</dd>
</dl>

Barrierefreiheit

Screenreader erkennen <dl> als Definitionsliste und kündigen sie entsprechend an. Bei jedem <dt> wird “Term” und bei jedem <dd> wird “Definition” vorgelesen, sodass blinde Nutzer die Zusammengehörigkeit der Paare verstehen.

Die HTML5-Möglichkeit, <dt>/<dd>-Paare in <div>-Elemente zu wrappen, ist explizit erlaubt und beeinträchtigt die Barrierefreiheit nicht. Das kann für Styling-Zwecke nützlich sein, etwa um ein Paar als Einheit zu rahmen.

Bei langen Definitionslisten hilft eine Überschrift vor dem <dl>, damit Screenreader-Nutzer wissen, was sie erwartet, bevor sie sich durch die Liste navigieren.

Häufige Fehler

<dl> für einfache Aufzählungen missbraucht: Wenn deine Einträge keine Begriffs-Beschreibungs-Paare sind, sondern einfache Punkte (z.B. eine Einkaufsliste), verwende <ul> oder <ol>. Eine <dl> ohne sinnvolle <dt>/<dd>-Paare ist semantisch falsch und verwirrt Screenreader.

<dt> oder <dd> vergessen: Jedes <dt> braucht mindestens ein zugehöriges <dd> und umgekehrt. Ein <dt> ohne <dd> ist wie eine Frage ohne Antwort — technisch valide, aber semantisch sinnlos. Ein <dd> ohne vorheriges <dt> ist ungültiges HTML.

<dl> für Layout-Einrückung: Manche Entwickler nutzen die Standard-Einrückung von <dd> als Layout-Trick. Das ist ein Missbrauch des Elements. Verwende CSS margin-left oder padding-left auf einem <div>, wenn du Einrückung brauchst.

Andere Elemente direkt in <dl>: Nur <dt>, <dd> und <div> (als Wrapper) dürfen direkte Kinder von <dl> sein. Ein <p> oder <span> direkt in <dl> ist ungültiges HTML.

Browser-Kompatibilität

Das dl-Element wird von allen Browsern seit den Anfängen des Webs vollständig unterstützt. Auch die Möglichkeit, dt/dd-Paare in div-Elemente zu wrappen (HTML5), funktioniert in allen modernen Browsern.

Email-Kompatibilität

Definitionslisten werden in Email-Clients unterschiedlich gut unterstützt. Die grundlegende Struktur funktioniert, aber Margins und Einrückungen weichen häufig ab.

Verwandte Elemente