<dl>: Das Definition 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 Definitionsliste. Dieses Element umfasst eine Liste von Gruppen aus Begriffen (spezifiziert mit dem <dt> Element) und Beschreibungen (bereitgestellt durch <dd> Elemente). Häufige Verwendungen für dieses Element sind die Implementierung eines Glossars oder die Anzeige von Metadaten (eine Liste aus 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 soll. Die Interpretation dieses Attributs ist browserspezifisch. Verwenden Sie stattdessen CSS: Um einen ähnlichen Effekt wie das compact Attribut zu erzielen, kann die CSS-Eigenschaft line-height mit einem Wert von 80% verwendet werden.

Barrierefreiheit

Jeder Screenreader gibt den Inhalt von <dl> unterschiedlich wieder, einschließlich der Gesamtanzahl, der Kontext von Begriffen/Beschreibungen und Navigationsmethoden. Diese Unterschiede sind nicht unbedingt Fehler. Seit iOS 14 kündigt VoiceOver den <dl> Inhalt als Liste an, wenn mit dem virtuellen Cursor navigiert wird (nicht über den Read-All Befehl). VoiceOver unterstützt keine Listen-Navigationsbefehle mit <dl>. Seien Sie vorsichtig, wenn Sie ARIA term und definition Rollen auf <dl> Konstruktionen anwenden, 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, 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

Definitionslisten 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 Trennstrich in CSS zu definieren, wie zum Beispiel:

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

Umwickeln von Schlüssel-Wert-Gruppen in div Elementen

HTML erlaubt das Umwickeln jeder Schlüssel-Wert-Gruppe in einem <dl> Element in einem <div> Element. Dies kann nützlich sein, wenn Mikrodaten verwendet werden, oder wenn globale Attribute auf eine ganze Gruppe angewendet werden oder zu Styling-Zwecken.

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

Hinweise

Verwenden Sie dieses Element nicht (und auch keine <ul>-Elemente), um lediglich Einrückungen auf einer Seite zu erzeugen. Obwohl es funktioniert, ist dies eine schlechte Praxis und verschleiert die Bedeutung von Definitionslisten.

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

Technische Zusammenfassung

Inhaltskategorien Fluss-Inhalt, und wenn die <dl> Elemente Kinder ein Name-Wert-Paar enthalten, greifbarer Inhalt.
Erlaubter Inhalt

Entweder: Null oder mehr Gruppen, die jeweils aus einem oder mehreren <dt>-Elementen bestehen, 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-Auslassung Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Fluss-Inhalt erlaubt.
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