<dl>: Das Beschreibungsliste-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). Häufige Anwendungen 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

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

Attribute

Dieses Element umfasst nur die globalen Attribute.

Barrierefreiheit

Jeder Screenreader präsentiert <dl>-Inhalte unterschiedlich, einschließlich der Gesamtanzahl, Kontext von Begriffen/Beschreibungen und Navigationsmethoden. Diese Unterschiede sind nicht unbedingt Fehler. Ab iOS 14 gibt VoiceOver an, dass <dl>-Inhalte eine Liste sind, wenn mit dem virtuellen Cursor navigiert wird (nicht über den Alles-vorlesen-Befehl). VoiceOver unterstützt keine Listen-Navigationsbefehle mit <dl>. Seien Sie vorsichtig beim Anwenden der ARIA-Rollen term und definition auf <dl>-Konstrukte, da VoiceOver (macOS und iOS) anpassen wird, wie sie angekündigt werden.

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, eine 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 die obigen Beispiele kombiniert werden.

Metadaten

Beschreibungslisten sind nützlich zur Anzeige von Metadaten als Liste von Schlüssel-Wert-Paaren.

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 hilfreich sein, einen Trennzeichen für Schlüssel-Wert in CSS zu definieren, zum Beispiel:

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

Umhüllung von Name-Wert-Gruppen in div-Elementen

HTML erlaubt das Umhüllen jeder Name-Wert-Gruppe in einem <dl>-Element in einem <div>-Element. Dies kann nützlich sein, wenn Mikrodaten genutzt werden, oder wenn globale Attribute auf eine ganze Gruppe anwendbar sind oder zu Stilzwecken.

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 eine Einrückung auf einer Seite zu erstellen. Obwohl es funktioniert, ist dies eine schlechte Praxis und verschleiert die Bedeutung von Beschreibungslisten.

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

Technische Zusammenfassung

Inhaltskategorien Fluss-Inhalt, und wenn die Kinder des <dl>-Elements eine Name-Wert-Gruppe umfassen, greifbarer Inhalt.
Erlaubter Inhalt

Entweder: Null oder mehr Gruppen bestehend aus einem oder mehreren <dt>-Elementen gefolgt von einem oder mehreren <dd>-Elementen, optional vermischt mit <script>- und <template>-Elementen.
Oder: (in WHATWG HTML, W3C HTML 5.2 und später) Ein oder mehrere <div>-Elemente, optional vermischt mit <script>- und <template>-Elementen.

Tag-Weglassung Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Fluss-Inhalt akzeptiert.
Implizite ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen group, list, none, presentation
DOM-Schnittstelle [`HTMLDListElement`](/de/docs/Web/API/HTMLDListElement)

Spezifikationen

Specification
HTML
# the-dl-element

Browser-Kompatibilität

Siehe auch