<dd>

Das <dd>-Element (Definition Description) liefert die Beschreibung, Definition oder den Wert zu einem vorangehenden <dt>-Begriff innerhalb einer Definitionsliste (<dl>). Browser rücken <dd> standardmäßig um ca. 40 Pixel ein, um die Zugehörigkeit zum Begriff visuell deutlich zu machen. Im Gegensatz zu <dt> kann <dd> beliebige Inhalte enthalten: von einfachem Text über Listen bis hin zu Bildern und Code-Blöcken.

Steckbrief <dd>

Kategorie: Listen
Art: Block
Beispiele: 3
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 04.02.2026

Grundlagen

Das <dd>-Element ist das Gegenstück zu <dt>: Während <dt> den Begriff nennt, liefert <dd> die zugehörige Erklärung. Diese Paarung ist der Kern jeder Definitionsliste. Ein <dd> bezieht sich immer auf das unmittelbar vorangehende <dt> (oder die vorangehenden <dt>-Elemente bei Synonymen).

<dd> folgt auf <dt> innerhalb eines <dl>-Elements
Es kann beliebige Inhalte enthalten: Text, Absätze, Listen, Bilder, Code-Blöcke
Mehrere <dd> nach einem <dt> sind erlaubt (mehrere Beschreibungen für einen Begriff)
Browser rücken <dd> standardmäßig mit margin-inline-start: 40px ein
Das <dd> darf nicht vor einem <dt> stehen: die Reihenfolge ist immer Term, dann Description

Syntax

index.html

Grundsyntax

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language: die Auszeichnungssprache für Webseiten.</dd>
</dl>

Beispiele

3 Beispiele

In einem Glossar kann <dd> auch längere Erklärungen mit mehreren Sätzen enthalten. Die Einrückung macht die Zuordnung zum Begriff visuell klar.

index.html

Glossar mit ausführlichen Beschreibungen

<dl>
  <dt>Responsive Design</dt>
  <dd>Ein Gestaltungsansatz, bei dem sich das Layout einer
    Webseite automatisch an die Bildschirmgröße anpasst.
    Das Ziel ist eine optimale Darstellung auf allen Geräten,
    vom Smartphone bis zum Desktop-Monitor.</dd>

  <dt>Progressive Enhancement</dt>
  <dd>Eine Strategie, bei der die Basis-Funktionalität für
    alle Browser bereitgestellt wird. Erweiterte Features
    werden nur dort hinzugefügt, wo sie unterstützt
    werden.</dd>
</dl>

<dd> kann beliebige Block-Elemente enthalten, auch weitere Listen. Das ist nützlich, wenn eine Beschreibung strukturiert sein muss.

index.html

Verschachtelte Inhalte

<dl>
  <dt>Frontend-Technologien</dt>
  <dd>
    <p>Die drei Kerntechnologien für die
      Frontend-Entwicklung:</p>
    <ul>
      <li><strong>HTML</strong>: Struktur und Inhalt</li>
      <li><strong>CSS</strong>: Design und Layout</li>
      <li><strong>JavaScript</strong>: Interaktivität</li>
    </ul>
  </dd>

  <dt>Backend-Technologien</dt>
  <dd>
    <p>Serverseitige Sprachen und Frameworks:</p>
    <ul>
      <li><strong>Node.js</strong>: JavaScript auf dem Server</li>
      <li><strong>Python</strong>: Django, Flask</li>
      <li><strong>Go</strong>: Hohe Performance</li>
    </ul>
  </dd>
</dl>

Mit etwas CSS lässt sich eine Definitionsliste in ein übersichtliches Schlüssel-Wert-Layout verwandeln, perfekt für Kontaktinformationen oder Profilseiten.

index.html

Kontaktinformationen

<dl>
  <div
    style="display: flex; padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;"
  >
    <dt style="min-width: 100px;">Name</dt>
    <dd>Max Mustermann</dd>
  </div>
  <div
    style="display: flex; padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;"
  >
    <dt style="min-width: 100px;">E-Mail</dt>
    <dd>mario@example.com</dd>
  </div>
  <div style="display: flex; padding: 10px 0;">
    <dt style="min-width: 100px;">Standort</dt>
    <dd>Berlin, Deutschland</dd>
  </div>
</dl>

Barrierefreiheit

Screenreader kündigen <dd> als “Definition” oder “Beschreibung” an und ordnen es dem vorangehenden <dt> zu. Diese automatische Verknüpfung funktioniert nur innerhalb einer korrekt strukturierten <dl>.

Bei mehreren aufeinanderfolgenden <dd> nach einem <dt> liest der Screenreader jede Beschreibung einzeln vor und ordnet sie alle demselben Begriff zu. Blinde Nutzer verstehen so, dass ein Begriff mehrere Aspekte oder Bedeutungen hat.

Wenn du die Standard-Einrückung von <dd> per CSS entfernst, solltest du sicherstellen, dass die visuelle Zuordnung zum <dt> auf andere Weise deutlich wird, etwa durch Abstände, Trennlinien oder Fettung des Terms.

Häufige Fehler

3 Fehler

01 <dd> ohne vorheriges <dt>

Ein <dd> muss immer auf ein <dt> (oder ein anderes <dd>) folgen. Ein <dd> am Anfang einer <dl> ohne vorangehendes <dt> ist ungültiges HTML und wird von Screenreadern nicht korrekt zugeordnet.

02 <dd> außerhalb von <dl>

Wie <dt> darf auch <dd> nur innerhalb eines <dl>-Elements stehen. Außerhalb verliert es seine semantische Bedeutung und wird als generischer Block-Inhalt behandelt.

03 <dd> mit <li> verwechseln

Ein häufiger Anfängerfehler ist, <dd> wie ein Listenelement (<li>) zu verwenden. Die beiden haben unterschiedliche Bedeutungen: <li> ist ein Eintrag in einer Aufzählung, <dd> ist eine Beschreibung zu einem Begriff. Verwechsle nicht <dl>/<dt>/<dd> mit <ul>/<li> oder <ol>/<li>.

Browser-Kompatibilität

5 von 5

Das dd-Element wird von allen Browsern seit den Anfängen des Webs vollständig unterstützt. Die Standard-Einrückung (margin-inline-start: 40px) ist in allen Browsern konsistent.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

Die Unterstützung von dd in Email-Clients entspricht der Unterstützung des übergeordneten dl-Elements. Die Standard-Einrückung kann in einigen Clients abweichen.

Apple Mail

Komplett
Gmail

Teilweise

Die Standard-Einrückung kann abweichen. Verwende inline margin-left für konsistentes Verhalten.
Outlook

Teilweise

Outlook rendert dd, aber die Einrückung fehlt oft. Explizites Inline-Styling empfohlen.
Thunderbird

Komplett
Yahoo Mail

Teilweise

Grundlegende Darstellung funktioniert, Einrückung kann abweichen.

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

<dd>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter