HTML Definition Lists dl dt dd

Glossare, FAQs, Produktspezifikationen – dafür gibt's die HTML Definitionsliste! Mit <dl>, <dt> und <dd> strukturierst du Begriff-Definition-Paare semantisch korrekt. In diesem Tutorial lernst du alle drei Elemente.

Einführung in das HTML Definitionslisten Tutorial

Was sind HTML Definitionslisten

Eine Definitionsliste besteht aus drei Elementen:

<dl> – Definition List (der Container)
<dt> – Definition Term (der Begriff)
<dd> – Definition Description (die Erklärung)

Anders als normale Listen zeigen Definitionslisten Zusammenhänge: "Begriff X bedeutet Y". Screenreader und Google verstehen diese Struktur!

Wann du dl dt dd verwendest

Perfekt für:

Glossare (Fachbegriffe erklärt)
FAQs (Frage + Antwort)
Produktspezifikationen (Eigenschaft + Wert)
Kontaktdaten (Label + Info)

Unterschied zu normalen Listen

ul/ol sind für gleichwertige Aufzählungen. Definitionslisten zeigen Beziehungen:

<ul> → Äpfel, Birnen, Bananen
<dl> → Apfel: rund und süß, Birne: länglich und saftig

Voraussetzungen

Benötigte HTML Grundkenntnisse

Du solltest HTML-Tags und Listen verstehen. Falls nicht, hol das kurz nach!

Editor und Browser Setup

Texteditor und Browser – mehr brauchst du nicht. Die Browser-Entwicklertools (F12) helfen beim Debuggen.

Schritt-für-Schritt-Anleitung

Grundstruktur mit dl dt dd erstellen

So sieht das Grundgerüst aus:

HTML Tutorial kostenlos lernen

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - die Struktursprache für Webseiten</dd>
</dl>

Der Browser rückt die <dd>-Elemente automatisch ein. Praktisch!

Erste Definitionsliste schreiben

Ein vollständiges Beispiel:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine erste Definitionsliste</title>
</head>
<body>
  <dl>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets für das Design von Webseiten</dd>
    <dt>JavaScript</dt>
    <dd>Programmiersprache für interaktive Webseiten</dd>
  </dl>
</body>
</html>

Mehrere Begriffe oder Definitionen

Flexibel: Mehrere dt vor einem dd (Synonyme) oder mehrere dd nach einem dt (verschiedene Bedeutungen):

<dl>
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dd>Programmiersprache für Webseiten</dd>
</dl>

Verschachtelte Definitionslisten

Für hierarchische Strukturen:

<dl>
  <dt>Programmiersprachen</dt>
  <dd>
    Sprachen zur Softwareentwicklung
    <dl>
      <dt>Frontend</dt>
      <dd>HTML, CSS, JavaScript</dd>
      <dt>Backend</dt>
      <dd>Python, Java, PHP</dd>
    </dl>
  </dd>
</dl>

Die Unterliste steht INNERHALB des dd-Elements!

Code-Beispiele zu HTML

Glossar erstellen

Der Klassiker:

Jetzt HTML lernen

<dl>
  <dt>API</dt>
  <dd>Application Programming Interface - Schnittstelle zwischen Programmen</dd>
  <dt>DOM</dt>
  <dd>Document Object Model - Repräsentation der HTML-Struktur</dd>
  <dt>URL</dt>
  <dd>Uniform Resource Locator - eindeutige Adresse einer Webressource</dd>
</dl>

FAQ-Bereich

Frage als dt, Antwort als dd – semantisch perfekt:

<dl>
  <dt>Wie kontaktiere ich den Support?</dt>
  <dd>Per E-Mail an support@example.com oder telefonisch unter 0800-123456.</dd>
</dl>

Produktspezifikationen

Ideal für Shops:

<dl>
  <dt>Prozessor</dt>
  <dd>Intel Core i7-12700K, 3,6 GHz</dd>
  <dt>Arbeitsspeicher</dt>
  <dd>32 GB DDR4 RAM</dd>
  <dt>Festplatte</dt>
  <dd>1 TB NVMe SSD</dd>
</dl>

Häufige Fehler & Troubleshooting

Fehler 1: Falsche Verschachtelung

dt und dd müssen direkte Kinder von dl sein!

FALSCH: <dl><p><dt>...</dt></p></dl>
RICHTIG: <dl><dt>...</dt><dd>...</dd></dl>

Fehler 2: Leere Elemente

Jedes dt braucht ein dd und umgekehrt. Leere Elemente sind semantisch sinnlos:

FALSCH: <dt></dt>
RICHTIG: <dt>Begriff</dt><dd>Definition</dd>

Fehler 3: Missbrauch für Layout

Definitionslisten sind keine Styling-Wrapper! Nutze sie nur für echte Begriff-Definition-Paare.

HTML: Best Practices & Tipps

Semantisch korrekte Verwendung

Frag dich: "Ist das wirklich ein Begriff mit Erklärung?" Wenn ja → Definitionsliste. Wenn nein → andere Elemente.

Styling mit CSS

Die Standard-Einrückung kannst du anpassen:

dd { margin-left: 40px; }
dt { font-weight: bold; }

Barrierefreiheit

Screenreader erkennen dl-Strukturen automatisch und lesen sie als Begriff-Definition-Paare vor. Das hilft blinden Nutzern enorm!

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt die Definitionslisten-Syntax:

<dl> – Container
<dt> – Begriff
<dd> – Definition

Damit erstellst du semantisch korrekte Glossare, FAQs und Produktspezifikationen.

Bereit für mehr? Lerne als Nächstes, wie du HTML Tabellen für strukturierte Daten erstellst!