<dl>: Das Description-List-Element

Dieses Element enthält nur die globalen Attribute.

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.

• VoiceOver auf iOS 14 unterstützt Beschreibungslisten
• Kurze Notiz zur Unterstützung von Beschreibungslisten

<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

<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

<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

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

Beschreibungslists 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 nützlich sein, einen Schlüssel-Wert-Trenner in CSS zu definieren, wie zum Beispiel:

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

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.

<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

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.

• <dt>
• <dd>