<dt>

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.

Steckbrief <dt>

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

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

index.html

Grundsyntax

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

Beispiele

3 Beispiele

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.

index.html

Synonyme mit gemeinsamer Beschreibung

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

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

index.html

Mehrere Beschreibungen

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

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

index.html

Gestylte Definitionsliste

<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

3 Fehler

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

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

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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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.

Apple Mail

Komplett
Gmail

Teilweise

Wird gerendert, aber ohne besondere Formatierung. Inline-Styles für font-weight empfohlen.
Outlook

Teilweise

Grundlegende Darstellung funktioniert, Margins können abweichen.
Thunderbird

Komplett
Yahoo Mail

Teilweise

Wird gerendert, Styling 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

<dt>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter