<dd>

Zuletzt aktualisiert am 4. Februar 2026

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.

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

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

Beispiele

Glossar mit ausführlichen Beschreibungen

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.

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

Verschachtelte Inhalte in <dd>

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

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

Kontaktinformationen als Schlüssel-Wert-Paare

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

<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

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

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

<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

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.

Email-Kompatibilität

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.

Verwandte Elemente