Liste von Begriffen
dl eignet sich z.B. für Glossare, Kalendereinträge oder Listen von Büchern mit Kurzbeschreibung und ist im Text eine gute Alternative zu einfachen Listen mit Listenpunkten. Die Definition List gab es schon in HTML 4. In HTML 5 ist das Tag in Description List umbenannt worden. Ein Beispiel ist HTML dl für Kalendereinträge:
<dl> <dt>12.01.2022</dt> <dd>Eröffnung des neuen Palmengartens</dd> <dd>Vortag »Orchideen«</dd> <dt>20.01.2022</dt> <dd>Führung durch das Orchideenhaus</dd> </dl>
-
12.01.2022
- Eröffnung des neuen Palmengartens
- Vortag »Orchideen«
-
20.01.2022
-
Führung durch den Orchideengarten
Die genaue Darstellung hängt vom jeweiligen Browser ab. Die meisten Browser setzen den Begriff an den linken Rand und die Beschreibung oder Erklärung eingerückt in eine neue Zeile. Wenn der Ausdruck sehr kurz ist – drei Buchstaben oder weniger –, kann die Beschreibung auch in der gleichen Zeile stehen.
HTML dl • Definitionen / Beschreibungen
Das dl-Tag bildet den Anfang und das Ende einer definition list / description list und fasst dt- und dd-Tags zusammen wie ul/ol Listen einrahmen. In einem dl-Element dürfen mehrere dt-Elemente notiert werden.
HTML dt • Begriff definieren
Das dt-Tag enthält den Ausdruck, der beschrieben werden soll. Mehreren Begriffen – dt-Elementen – kann eine Erklärung zugeordnet werden (z.B. bei synonymen Begriffen). Nach einem oder mehreren dt-Elementen folgt ein dd-Element, das die Beschreibung enthält.
- Sediment
- Schichtgesteine
- sind mehr oder weniger feste Gesteine, die nach einem kürzeren oder längeren Transport durch Schwerkraft oder ein strömendes Medium – auf dem trockenen Land oder am Grund eines Gewässers abgelagert werden
<dl> <dt>Sediment <dt>Schichtgesteine <dd>sind mehr oder weniger feste Gesteine, … … …</dd> </dl>
dt- und dd-Elemente müssen nicht geschlossen werden. Sowohl in dt- als auch in dd-Elementen dürfen Block-Elemente liegen – z.B. div, nicht aber header innerhalb von dt.
HTML dd • Erklärender Text
Das dd-Tag stellt die Definition dar. Es muss zusammen mit dem dt-Tag benutzt werden, das den Begriff einschließt, und dem dl-Tag, das die Definitionsliste einleitet und beendet.
Definitionslisten mit dl verschachteln
Definitionslisten mit HTML dl können ineinander verschachtelt werden.
<dl>
<dt>Webkit</dt>
<dd>Das Open Source-Projekt »Webkit« ist Grundlage für mehrere Browser
<dl>
<dt>Chrome</dt><dd>Browser von Google, …</dd>
<dt>Safari</dt><dd>Browser von Apple, …</dd>
</dl>
</dd>
…
<dt>Internet Explorer</dt>
<dd>Browser von Microsoft</dd>
<dl>
CSS für dt und dd in einer Zeile
Ein dl-Element mit Begriff – Erklärung ist eine gute Alternative zur ungeordneten Liste. CSS Grid eignet sich hervorragend, um dt und dd in eine Zeile zu setzen.
- Longmire
- Diese amerikanische Crime-Serie basiert auf den Bestsellern von Craig Johnson und fühlt sich an wie ein zeitgenössischer Western, nur kälter und mysteriöser.
- Designated Survivor
- ist eine US-amerikanische Fernsehserie von David Guggenheim mit Kiefer Sutherland in der Hauptrolle. Trotz einiger Schwächen eine spannende Serie mit vielen überraschenden Wendungen
- Mozart in the Jungle
- Die Serie basiert auf den Memoiren Mozart in the Jungle: Sex, Drugs, and Classical Music von der US-amerikanischen Oboistin Blair Tindall, in denen die Autorin ihre Erfahrungen bei den New Yorker Philharmonikern niedergeschrieben hat.
dl.grid {
display: grid;
grid-template-columns: 120px calc(100% - 120px);
}
dt, dd {
margin-bottom: 1em;
margin-left: 0;
}
Das ist einfacher als diverse Techniken mit float oder position, aber funktioniert nicht in IE11, der noch einer veralteten Syntax folgt.
Mit display: flex für dl-Listen sitzen dt und dd dann auch in IE auf einer Zeile:
dl.grid {
display: flex; flex-wrap: wrap;
}
.grid dt {width: 120px; }
.grid dd { width: calc(100% - 146px);}
