HTML/Tutorials/Listen/Beschreibungslisten

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Listen
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
HTML


Eine etwas andere Form von Listen sind Definitionslisten, seit HTML5 Beschreibungslisten (englisch: definition- bzw. description list), die mit dl-Elementen aufgebaut werden.

Solche Listen sind beispielsweise für Glossare gedacht. Ein Glossar besteht meist aus einer Liste von Einträgen, die wiederum aus mindestens einem zu erklärenden Sachverhalt nebst mindestens einer Erklärung besteht.

dl, dt und dd[Bearbeiten]

  • dl: leitet eine Definitions- bzw. Beschreibungsliste ein
  • dt: (description (list) term) leitet den zu erläuternden Ausdruck ein
  • dd (description (list) description) umschließt die Erläuterung.
  • IE
  • Opera
  • Firefox
  • Safari
  • Chrome
  • HTML 2.0
  • XHTML 1.0
  • HTML5
Beschreibungsliste ansehen …
<dl> <dt>allg.</dt> <dd>allgemein</dd> <dt>bez.</dt> <dd>bezüglich</dd> <dd>bezahlt</dd> <dt>zzgl.</dt> <dd>zuzüglich</dd> </dl>

Die Abfolge von dt- und dd-Elementen innerhalb einer dl-Liste ist nicht streng geregelt. Es dürfen auch mehrere dt- oder dd-Elemente hintereinander folgen. Zum Beispiel könnten Begriffe mit einer Erklärung abgehandelt werden oder mehrere Bedeutungen für einen Begriff existieren.

Das Verschachteln von Definitionslisten ist ebenfalls möglich. Dadurch können Sie baumartige Strukturen im Text abbilden. „Innere“ Listen müssen dabei innerhalb des dd-Elements notiert werden.

dt und dd in einer Zeile[Bearbeiten]

Standardmäßig werden in einer Definitionsliste dt und dd untereinander dargestellt (jeweils display: block), dd ist etwas eingerückt:

Beispiel
dt ………………
 dd ………………

Möchte man hingegen den Term (dt) und dessen Definition (dd) in einer Zeile nebeneinander stehen haben, z. B. noch mit einem Doppelpunkt voneinander getrennt,

Beispiel
dt ………………: dd ………………
dt ………………: dd ………………

liegt zwar display: inline nahe, was allerdings die komplette Definitionsliste in eine Zeile setzt. Stattdessen muss dd rechts am dt „vorbeifließen“:

Beispiel ansehen …
dt {
  float: left;
  font-weight: bold;
  margin-right: 0.5em;
}

/* und noch der Doppelpunkt */
dt::after { 
  content: ": "; 
}

/* ein Clearfix für Folge-dd-Elemente */
dd::after {
  clear: left;
  content: " ";
  display: block;
}
Beachten Sie: Unter Umständen, besonders bei kleinen Viewscreens oder großen Inhalten der dt- bzw. dd-Elemente, könnte floating allein nicht das gewünschte Ergebnis erzielen.

Kontaktseite mit Grid Layout[Bearbeiten]

Im Tutorial Seitenstrutkurierung gibt es eine Kontaktseite, in der eine dl mit Grid Layout passend positioniert wird:

Kontaktadresse mit Grid Layout ansehen …
dl.grid { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dd { 
  margin: 0; 
  padding-left: 1em; 
}
dl.grid dd {
  margin-bottom: 1em;
}

a[href^="tel"] { white-space: nowrap; }

Die Beschreibungsliste mit den Kontaktdaten wird mit display: grid zum Raster, das mit grid-template-columns zwei Spalten pro Reihe erhält. Auf eine feste Breitenangabe wird verzichtet, die zweite Spalte soll 100% des Inhalts betragen.

Über den Attributselektor a[href^="tel"] werden alle Links, die auf eine Telefonnummer verweisen, mit white-space: nowrap an einem Umbruch gehindert. So werden die Nummern immer in einer Zeile dargestellt.