Das HTML <dl> Element (oder HTML Description List Element) umfasst eine Liste von Begriffspaaren und Beschreibungen. Üblicherweise wird das Element zur Implementierung eines Glossars oder zur Anzeige von Metadaten (eine Liste von Schlüsselwertpaaren) genutzt.
Vor HTML5, war <dl> bekannt als Definition List.
| Inhaltskategorien | Fließender Inhalt, wenn das <dl> Elementkind nur ein Wertepaar beinhaltet, dann greifbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Null oder mehr <dt> Elemente, jedes gefolgt von einem oder mehreren <dd> Elementen. |
| Tag Auslassung | Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich. |
| Erlaubte Elternelemente | Jedes Element, das fließenden Inhalt erlaubt. |
| DOM Schnittstelle | HTMLDListElement |
Attribute
Dieses Element schließt globale Attribute ein.
compact- Zwingt die Beschreibung dazu, in derselben Linie zu erscheinen wie der Begriff. Dieses Attribut wird aktuell nicht unterstützt.
Beispiele
Einzelbegriff 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 definitions -->
</dl>
Ausgabe:
Multiple Begriffe, einzelne 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 definitions -->
</dl>
Ausgabe:
Einzelbegriff, multiple 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 definitions -->
</dl>
Ausgabe:
Multiple Begriffe und Beschreibungen
Es ist ebenfalls möglich, multiple Begriffe und Beschreibungen zu definieren, wenn man die oberen Beispiele kombiniert.
Metadata
Description Lists sind nützlich um Metadaten als Wertepaar-Listen anzuzeigen.
<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>
Tipp: Es kann hilfreich sein, Separatoren für Schlüsselwerte in CSS3 zu definieren, wie zum Beispiel:
dt:after {
content: ": ";
}
Anmerkungen
Weder dieses Element, noch das <ul> Element, sollten genutzt werden, um bloß eine Einrückung vorzunehmen. Es funktioniert zwar, wird in der Praxis jedoch nicht angewendet und verfehlt die Definition einer Description List.
Um die Einrückung eines Begriffs zu ändern, sollte die CSS margin Eigenschaft genutzt werden.
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| WHATWG HTML Living Standard Die Definition von '<dl>' in dieser Spezifikation. |
Lebender Standard | |
| HTML5 Die Definition von '<dl>' in dieser Spezifikation. |
Empfehlung | |
| HTML 4.01 Specification Die Definition von '<dl>' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
| Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | 1.0 | (Ja) | (Ja) | (Ja) | (Ja) |
| Merkmal | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) |