mitmario.dev

<dl>

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).

Steckbrief <dl>
Kategorie
Listen
Art
Block
Beispiele
3
Browser
5 von 5
E-Mail
2 von 5
Stand
04.02.2026

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

index.html
Grundsyntax
<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

3 Beispiele

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

index.html
Glossar
<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>

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

4 Fehler
01 <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.
02 <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.
03 <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.
04 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

5 von 5

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.

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

2 von 5

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

  • Apple Mail

    Komplett

  • Gmail

    Teilweise

    Die grundlegende Struktur wird gerendert, aber die Standard-Einrückung von dd kann abweichen. Inline-Styles empfohlen.

  • Outlook

    Teilweise

    Outlook rendert dl/dt/dd, setzt aber eigene Margins. Die Einrückung von dd kann fehlen oder abweichen.

  • Thunderbird

    Komplett

  • Yahoo Mail

    Teilweise

    Grundlegende Darstellung funktioniert, Margins und Padding können abweichen.

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.