<dl> HTML-Element für Definitionslisten

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 Boolean-Attribut deutet darauf hin, dass die Liste in einem kompakten Stil gerendert werden sollte. Die Interpretation dieses Attributs ist browser-spezifisch. 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 stellt <dl>-Inhalte unterschiedlich dar, einschließlich Gesamtsumme, Kontext von Begriffen/Beschreibungen und Navigationsmethoden. Diese Unterschiede sind nicht notwendigerweise Fehler. Ab iOS 14 wird VoiceOver ankündigen, dass <dl>-Inhalte eine Liste sind, wenn mit dem virtuellen Cursor navigiert wird (nicht über den Kommando „Alles vorlesen“). VoiceOver unterstützt keine Listennavigationsbefehle mit <dl>. Seien Sie vorsichtig, wenn Sie ARIA term und definition Rollen auf <dl>-Konstrukte anwenden, da VoiceOver (macOS und iOS) die Art und Weise, wie sie angekündigt werden, anpasst.

• VoiceOver auf iOS 14 Unterstützung für Definitionslisten
• Kurznotiz zur Unterstützung von Definitionslisten

Beispiele

Einzelner Begriff und Beschreibung

<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

<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

<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, um Metadaten als Liste von Schlüssel-Wert-Paaren darzustellen.

<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:

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

Eingefasste Name-Wert-Gruppen in div-Elementen

HTML erlaubt das Einfassen jeder Name-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.

<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 nur, um Einzug auf einer Seite zu erstellen. Obwohl es funktioniert, ist dies eine schlechte Praxis und verdeckt die Bedeutung von Definitionslisten.

Um den Einzug eines Definitionsbegriffs zu ändern, verwenden Sie die CSS-Eigenschaft margin.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <dt>
• <dd>