HTML-Tag dl – Definitionsliste

HTML definition list dl, dt, dd

HTML dldescription list (früher definition list) – ähnelt ungeordnen und geordneten Listen (ul / ol) und strukturiert Inhalt in Listen. dl benutzt anstelle von Listenpunkten oder Ordnungszahlen einen Begriff. Dem Begriff folgt direkt die Erklärung.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

icon
Eröffnung des neuen Palmengartens
Vortag »Orchideen«

20.01.2022

icon
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);}