HTML/Tutorials/Listen/Beschreibungslisten
- 20min
- einfach
- 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
-
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.
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
Standardmäßig werden in einer Definitionsliste dt und dd untereinander dargestellt (jeweils display: block), dd ist etwas eingerückt:
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,
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“:
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;
}
dt- bzw. dd-Elemente, könnte floating allein nicht das gewünschte Ergebnis erzielen.Kontaktseite mit Grid Layout
Im Tutorial Textauszeichnung gibt es eine Kontaktseite, in der eine dl mit Grid Layout passend positioniert wird:
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.
