CSS, HTML und Javascript mit {stil}

HTML-Tag dl – Definitionsliste

HTML dl Description List

HTML dl, »definition 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.

Die Definition List gab es schon in HTML 4. In HTML 5 ist das Tag in Description List umbenannt worden. Gleichzeitig wurde »Dialog« als Beispiel für die Description List entfernt.

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 ist der Ausdruck, der definiert / beschrieben werden soll. Nach dem dt-Tag muss das dd-Tag folgen, das die Definition bzw. Beschreibung enthält. Einem dl-Tag mit dem zu definierenden Begriff können auch mehrere Erklärungen in 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>

HTML dl für Kalendereinträge

<dl>
   <dt>12.4.2016</dt>
   <dd>Eröffnung des neuen Palmengartens</dd>
   <dt>20.5.2016</dt>
   <dd>Führung durch den Orchideengarten</dd>
</dl>
12.4.2016
Eröffnung des neuen Palmengartens
20.5.2016
Führung durch den Orchideengarten