CSS, HTML und Javascript mit {stil}

HTML-Tag dl – Definitionsliste

HTML definition list dl, dt, dd Definitionslisten sind eine gute Alternative zu ungeordneten Listen mit ul

HTML dldefinition list und in HTML5 description 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.

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.

HTML dl für Kalendereinträge

<dl>
   <dt>12.10.2017</dt>
   <dd>Eröffnung des neuen Palmengartens</dd>
   <dt>20.10.2017</dt>
   <dd>Führung durch den Orchideengarten</dd>
</dl>
12.10.2017
Eröffnung des neuen Palmengartens
20.10.2017
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 definiert / beschrieben werden soll. Nach dem dt-Tag muss das dd-Tag folgen, das die Definition bzw. Beschreibung enthält. Einem dt-Tag mit dem zu definierenden Begriff können auch Erklärungen in mehreren dd-Tags folgen.

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>

Tipp: 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 Internet Explorer und Egde, die noch einer veralteten Syntax folgen.

Mit display: flex für dl-Listen sitzen dt und dd dann auch in IE und Edge auf einer Zeile:

dl.grid {
    display: flex; flex-wrap: wrap;
}
.grid dt {width: 120px; }
.grid dd { width: calc(100% - 146px);}
Pfirsich Birne Erdbeere