W3docs
de
Anmelden

HTML <dl>-Tag

Wie man mit dem <dl>-Tag eine Beschreibungsliste erstellt. Beschreibung des Tags, Attribute und Beispiele.

Der HTML-<dl>-Tag definiert eine Beschreibungsliste (früher als Definitionsliste bezeichnet). Er gruppiert Begriffe und ihre Beschreibungen als Name-Wert-Paare. Das <dl>-Element ist der Container; darin gibt jedes <dt>-Tag einen Begriff (den Namen) an, und jedes <dd>-Tag gibt die Beschreibung dieses Begriffs (den Wert) an.

Diese Seite erläutert, wann <dl> statt einer ungeordneten oder geordneten Liste verwendet werden sollte, wie Elemente für Styling und Mikrodaten gruppiert werden, wie sich das Markup auf die Barrierefreiheit auswirkt, und enthält ausführbare Beispiele für gängige Muster.

Wann <dl> verwenden

Verwende eine Beschreibungsliste, wenn dein Inhalt aus Name-Wert-Paaren besteht und keine flache Aufzählung von Elementen ist. Greife auf <dl> zurück für:

  • Glossare und Wörterbücher — ein Begriff gefolgt von seiner Definition.
  • FAQs — jede Frage ist ein <dt>, jede Antwort ein <dd>.
  • Metadaten — Schlüssel-Wert-Paare wie Author, Published, Status.
  • Dialoge oder Skripte — der Sprecher ist der Begriff, der gesprochene Text die Beschreibung.
  • Produktspezifikationen — Weight, Dimensions, Material, jeweils mit einem Wert.

Bevorzuge <ul>, wenn Elemente keine inhärente Reihenfolge und keinen zugehörigen Wert haben, und <ol>, wenn die Reihenfolge oder Nummerierung wichtig ist. Das charakteristische Merkmal von <dl> ist die Paarung eines Namens mit einem oder mehreren Werten.

Verwende <dl> nicht nur zum Einrücken von Text. Es trägt eine semantische Bedeutung, und die Verwendung für das visuelle Layout verschleiert diese Bedeutung. Um Inhalte visuell einzurücken, verwende stattdessen die CSS-Eigenschaft margin oder padding.

Syntax

Der <dl>-Tag wird paarweise verwendet. Die Begriffe und Beschreibungen werden zwischen dem öffnenden (<dl>) und schließenden (</dl>) Tag geschrieben.

Beispiel für den HTML-<dl>-Tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <dl>
      <dt>Hypertext</dt>
      <dd>A system of text pages that have cross-references.</dd>
      <dt>Hyperlink</dt>
      <dd>A part of a hypertext document that references another item.</dd>
    </dl>
  </body>
</html>
Probier es selbst »

Mehrere Begriffe und Beschreibungen

Ein einzelnes <dt> kann mehrere <dd>-Beschreibungen haben, und mehrere <dt>-Begriffe können sich eine <dd>-Beschreibung teilen. So lassen sich Synonyme, Alternativen und gruppierte Definitionen abbilden.

<dl>
  <!-- One term, multiple descriptions -->
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform web browser.</dd>
  <dd>Developed and maintained by the Mozilla Foundation.</dd>

  <!-- Multiple terms sharing one description -->
  <dt>JS</dt>
  <dt>JavaScript</dt>
  <dt>ECMAScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Paare mit <div> gruppieren

HTML5 erlaubt es, jede Name-Wert-Gruppe in ein <div> zu wrappen, das direkt innerhalb des <dl> platziert wird. Dies ist gültiges Markup und nützlich, wenn du:

  • CSS auf ein ganzes Paar gleichzeitig anwenden möchtest (z. B. mit Flexbox oder CSS Grid),
  • Mikrodaten oder globale Attribute wie class oder data-* an eine einzelne Gruppe anhängen möchtest.

Das <div> ist das einzige Element außer <dt> und <dd>, das als direktes Kind von <dl> erlaubt ist.

<dl>
  <div class="row">
    <dt>Name</dt>
    <dd>Ada Lovelace</dd>
  </div>
  <div class="row">
    <dt>Field</dt>
    <dd>Mathematics</dd>
  </div>
  <div class="row">
    <dt>Known for</dt>
    <dd>The first published algorithm for a computer.</dd>
  </div>
</dl>
.row {
  display: flex;
  gap: 1rem;
}
.row dt {
  width: 8rem;
  font-weight: bold;
}

Barrierefreiheit

Eine Beschreibungsliste ist eine barrierefreie Möglichkeit, Schlüssel-Wert-Beziehungen darzustellen, aber nur wenn das Markup semantisch korrekt verwendet wird.

  • <dt>-Elemente haben eine implizite term-Rolle und <dd>-Elemente eine implizite definition-Rolle, sodass Hilfstechnologien verstehen, welches Element der Name und welches der Wert ist.
  • Screenreader geben typischerweise eine Anzahl aus, z. B. „Beschreibungsliste, 3 Begriffe", und lesen dann jeden Begriff gefolgt von seiner Beschreibung vor. Die Paarung sollte allein aus dem Text ersichtlich sein, daher sollte jedes <dd> so formuliert werden, dass seine Beziehung zum vorangehenden <dt> auch ohne Kontext klar ist.
  • Die optionale <div>-Gruppierung unterbricht dies nicht. Die term- und definition-Rollen gelten weiterhin, da die <dt>- und <dd>-Elemente gültige Nachfahren des <dl> bleiben.

Attribute

Der <dl>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.

Den HTML-<dl>-Tag stylen

Standardmäßig rücken Browser jedes <dd> ein und stapeln Begriffe und Beschreibungen vertikal. Du kannst sie mit CSS zurücksetzen und neu gestalten:

dl {
  margin: 0;
  padding: 0;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 20px;
}

Übungen

Übung
Welche Aussagen über den HTML dl-Tag sind korrekt?
Welche Aussagen über den HTML dl-Tag sind korrekt?
Was this page helpful?