<dl>: Das Description-List-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <dl> HTML-Element repräsentiert eine Beschreibungsliste. Das Element umfasst eine Liste von Gruppen von Begriffen (spezifiziert mit dem <dt>-Element) und Beschreibungen (bereitgestellt durch <dd>-Elemente). Gängige Verwendungen für dieses Element sind die Implementierung eines Glossars oder die Darstellung von Metadaten (eine Liste von Schlüssel-Wert-Paaren).

Probieren Sie es aus

Attribute

Dieses Element enthält nur die globalen Attribute.

Barrierefreiheit

Jeder Screenreader zeigt <dl>-Inhalt unterschiedlich an, einschließlich der Gesamtanzahl, des Kontexts der Begriffe/Beschreibungen und der Navigationsmethoden. Diese Unterschiede sind nicht unbedingt Fehler. Ab iOS 14 kündigt VoiceOver an, dass <dl>-Inhalt eine Liste ist, wenn Sie mit dem virtuellen Cursor navigieren (nicht über den Befehl "Alles vorlesen"). VoiceOver unterstützt keine Listennavigationsbefehle mit <dl>. Seien Sie vorsichtig, wenn Sie ARIA-Rollen wie term und definition auf <dl>-Konstrukte anwenden, da VoiceOver (macOS und iOS) die Ansage entsprechend anpasst.

Beispiele

Einzelner Begriff und Beschreibung

html

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Ergebnis

Mehrere Begriffe, einzelne Beschreibung

html

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Ergebnis

Einzelner Begriff, mehrere Beschreibungen

html

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Ergebnis

Mehrere Begriffe und Beschreibungen

Es ist auch möglich, mehrere Begriffe mit mehreren entsprechenden Beschreibungen zu definieren, indem Sie die obigen Beispiele kombinieren.

Metadaten

Beschreibungslists sind nützlich, um Metadaten als Liste von Schlüssel-Wert-Paaren darzustellen.

html

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Ergebnis

Tipp: Es kann nützlich sein, einen Schlüssel-Wert-Trenner in CSS zu definieren, wie zum Beispiel:

css

dt::after {
  content: ": ";
}

Name-Wert-Gruppen in `div`-Elemente einwickeln

HTML erlaubt das Einwickeln jeder Name-Wert-Gruppe in einem <dl>-Element in ein <div>-Element. Dies kann nützlich sein, wenn Mikrodaten verwendet werden oder wenn globale Attribute für eine ganze Gruppe gelten oder für Styling-Zwecke.

html

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

Ergebnis

Anmerkungen

Verwenden Sie dieses Element (noch <ul>-Elemente) nicht, um lediglich Einrückungen auf einer Seite zu erstellen. Auch wenn es funktioniert, ist dies eine schlechte Praxis und verdeckt die Bedeutung von Beschreibungslists.

Um die Einrückung eines Beschreibungsterms zu ändern, verwenden Sie die CSS margin-Eigenschaft.

Technische Zusammenfassung

Inhaltskategorien	Flow Content, und wenn die Kinder des `<dl>`-Elements eine Name-Wert-Gruppe einschließen, spürbarer Inhalt.
Zulässiger Inhalt	Entweder: Null oder mehr Gruppen, von denen jede aus einem oder mehreren `<dt>`-Elementen gefolgt von einem oder mehreren `<dd>`-Elementen besteht, optional durchmischt mit `<script>`- und `<template>`-Elementen. Oder: (in WHATWG HTML, W3C HTML 5.2 und später) Ein oder mehrere `<div>`-Elemente, optional durchmischt mit `<script>`- und `<template>`-Elementen.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind zwingend erforderlich.
Zulässige Eltern	Jedes Element, das Flow-Content akzeptiert.
Implizite ARIA-Rolle	Keine entsprechende Rolle
Zulässige ARIA-Rollen	`group`, `list`, `none`, `presentation`
DOM-Schnittstelle	[`HTMLDListElement`](/de/docs/Web/API/HTMLDListElement)

Spezifikationen

Specification
HTML Standard # the-dl-element

Browser-Kompatibilität

BCD tables only load in the browser