<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 (festgelegt mit dem <dt>-Element) und Beschreibungen (bereitgestellt durch <dd>-Elemente). Häufige Verwendungen dieses Elements sind die Implementierung eines Glossars oder die Anzeige von Metadaten (einer 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 akzeptiert auch die globalen Attribute.

compact

Dieses boolesche Attribut deutet an, dass die Liste in einem kompakten Stil gerendert werden sollte. Die Interpretation dieses Attributs ist browserspezifisch. Verwenden Sie stattdessen CSS: Um eine ähnliche Wirkung wie das compact-Attribut zu erzielen, kann die CSS-Eigenschaft line-height mit einem Wert von 80% verwendet werden.

Barrierefreiheit

Jeder Bildschirmleser gibt <dl>-Inhalte unterschiedlich wieder, einschließlich der Gesamtanzahl, der Begriffs-/Definitionskontexte und der Navigationsmethoden. Diese Unterschiede sind nicht unbedingt Fehler. Mit iOS 14 wird VoiceOver ankündigen, dass <dl>-Inhalte eine Liste sind, wenn mit dem virtuellen Cursor navigiert wird (nicht über den Alle-lesen-Befehl). VoiceOver unterstützt keine Listennavigationsbefehle mit <dl>. Seien Sie vorsichtig bei der Anwendung von ARIA 'term' und 'definition' Rollen auf <dl>-Konstrukte, da VoiceOver (macOS und iOS) anpasst, 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, 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 die obigen Beispiele kombiniert werden.

Metadaten

Beschreibungsliste 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 Schlüssel-Wert-Trenner im CSS zu definieren, wie zum Beispiel:

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

Einwickeln von Name-Wert-Gruppen in div-Elemente

HTML erlaubt das Einwickeln jeder Name-Wert-Gruppe in einem <dl>-Element in ein <div>-Element. Dies kann nützlich sein, wenn Microdata verwendet wird oder wenn globale Attribute auf eine gesamte Gruppe angewendet werden, oder aus stilistischen Gründen.

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 (oder <ul>-Elemente) nicht, um lediglich Einrückungen auf einer Seite zu erzeugen. Obwohl es funktioniert, ist dies eine schlechte Praxis und verschleiert die Bedeutung von Beschreibungslisten.

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

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, und wenn die Kinder des <dl>-Elementes eine Name-Wert-Gruppe beinhalten, greifbarer Inhalt.
Erlaubter Inhalt

Entweder: Null oder mehr Gruppen, die jeweils aus einem oder mehreren <dt>-Elementen gefolgt von einem oder mehreren <dd>-Elementen bestehen, 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-Wechsel Keine, sowohl der Start- als auch der End-Tag sind zwingend erforderlich.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert.
Implizierte 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