<dt>

Zuletzt aktualisiert am 4. Februar 2026

Das <dt>-Element (Definition Term) markiert einen Begriff, Namen oder Schlüssel innerhalb einer Definitionsliste (<dl>). Es bildet immer ein Paar mit <dd> (Description): <dt> stellt die Frage, <dd> liefert die Antwort. Ohne <dt> gibt es keine Definitionsliste, denn jede Beschreibung braucht einen zugehörigen Begriff.

Grundlagen

Das <dt>-Element definiert den Term, der anschließend durch ein oder mehrere <dd>-Elemente beschrieben wird. Browser stellen <dt> standardmäßig als Block-Element ohne besondere Formatierung dar, im Gegensatz zu <dd>, das eingerückt wird. Die Hervorhebung von <dt> (z.B. fett) musst du selbst per CSS hinzufügen.

• <dt> darf nur innerhalb eines <dl>-Elements stehen
• Es enthält typischerweise kurzen Inline-Content: Text, Links, <strong>, <em>, <code> usw.
• Laut Spec ist Flow Content erlaubt, aber keine <header>, <footer>, Sectioning- oder Heading-Elemente. In der Praxis solltest du <dt> trotzdem kurz halten und komplexe Inhalte in <dd> packen
• Auf <dt> muss mindestens ein <dd> folgen (oder ein weiteres <dt>, wenn mehrere Begriffe eine Beschreibung teilen)
• Mehrere aufeinanderfolgende <dt> vor einem <dd> sind erlaubt (Synonyme)

Syntax

<dl>
  <dt>Frontend</dt>
  <dd>Der sichtbare Teil einer Webseite,
    mit dem Nutzer interagieren.</dd>
</dl>

Beispiele

Mehrere Begriffe teilen eine Beschreibung

Wenn mehrere Begriffe dieselbe Bedeutung haben (Synonyme oder Abkürzungen), kannst du mehrere <dt> vor einem <dd> schreiben. Alle Begriffe werden dann mit derselben Beschreibung verknüpft.

<dl>
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dd>Eine dynamische Programmiersprache, die hauptsächlich
    für interaktive Webseiten verwendet wird.</dd>

  <dt>TS</dt>
  <dt>TypeScript</dt>
  <dd>Eine typisierte Obermenge von JavaScript,
    die zu JavaScript kompiliert wird.</dd>
</dl>

Ein Begriff mit mehreren Beschreibungen

Umgekehrt kann ein einzelner Begriff mehrere Beschreibungen haben, etwa verschiedene Bedeutungen oder Verwendungen desselben Worts.

<dl>
  <dt>Port</dt>
  <dd>Ein Netzwerk-Endpunkt, über den ein Dienst erreichbar
    ist (z.B. Port 80 für HTTP).</dd>
  <dd>Ein physischer Anschluss an einem Computer
    (z.B. USB-Port).</dd>
  <dd>In der Softwareentwicklung: Eine Anpassung von Software
    an eine andere Plattform.</dd>
</dl>

Gestylte Definitionsliste

Mit CSS lässt sich eine Definitionsliste visuell ansprechend gestalten. Hier ein Beispiel mit hervorgehobenen Begriffen und klarer Trennung der Paare.

<dl>
  <div style="padding: 12px 0; border-bottom: 1px solid #e5e7eb;">
    <dt>Sprache</dt>
    <dd>JavaScript / TypeScript</dd>
  </div>
  <div style="padding: 12px 0; border-bottom: 1px solid #e5e7eb;">
    <dt>Framework</dt>
    <dd>Astro</dd>
  </div>
  <div style="padding: 12px 0;">
    <dt>Lizenz</dt>
    <dd>MIT</dd>
  </div>
</dl>

Barrierefreiheit

Screenreader kündigen <dt> als “Term” an, sodass blinde Nutzer wissen, dass es sich um einen Begriff handelt, auf den eine Beschreibung folgt. Diese semantische Zuordnung funktioniert nur, wenn <dt> innerhalb eines <dl> steht. Außerhalb verliert es seine Bedeutung.

Bei mehreren aufeinanderfolgenden <dt> (Synonyme) lesen Screenreader jeden Term einzeln vor, bevor sie zur zugehörigen Beschreibung kommen. Das ist bewusstes Verhalten und hilft Nutzern, alle Varianten eines Begriffs zu erfassen.

Halte den Inhalt von <dt> kurz und prägnant. Längere Erklärungen gehören in das <dd>-Element. Ein <dt> mit mehreren Sätzen verwirrt die Zuordnung von Term und Beschreibung.

Häufige Fehler

<dt> außerhalb von <dl>: Ein <dt> darf nur als Kind von <dl> (oder eines <div> innerhalb von <dl>) stehen. Außerhalb verliert es seine semantische Bedeutung und wird von Screenreadern nicht als Definitionsterm erkannt.

Komplexe Inhalte in <dt>: Laut HTML-Spec darf <dt> zwar Flow Content enthalten (also auch <p>, <ul> etc.), aber in der Praxis solltest du <dt> kurz halten. Längere Erklärungen, Listen oder strukturierter Inhalt gehören semantisch in das <dd>-Element. Ein <dt> mit mehreren Absätzen verwirrt die Zuordnung von Term und Beschreibung.

<dt> ohne folgendes <dd>: Ein Begriff ohne Beschreibung ist zwar technisch valide, aber semantisch sinnlos. Jedes <dt> sollte von mindestens einem <dd> gefolgt werden, sonst fehlt die halbe Information.

Browser-Kompatibilität

Das dt-Element wird von allen Browsern seit den Anfängen des Webs vollständig unterstützt.

Email-Kompatibilität

Die Unterstützung von dt in Email-Clients entspricht der Unterstützung des übergeordneten dl-Elements. Die grundlegende Darstellung funktioniert, aber die visuelle Formatierung kann abweichen.

Verwandte Elemente