Listen in HTML/Beschreibungslisten
- 20min
- einfach
- Grundkenntnisse in
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.
Inhaltsverzeichnis
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 kann man 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.Definitionsliste nebeneinander
Die Elemente von Definitions- oder Beschreibungslisten werden in der browsereigenen Darstellung untereinander angezeigt. Das Platzieren der Blöcke kann schwierig werden, da bei mehreren dd-Elementen ein gemeinsames Elternelement fehlt. Mit Grid Layout ist es möglich, Definitionslisten in ein kompaktes Raster zu fassen.
dl {
display: grid;
grid-template-columns: auto 1fr;
max-width: 18em;
margin: 1em;
line-height: 1.4;
}
dt {
grid-column: 1;
font-weight: bold;
}
dd {
grid-column: 2;
}
Die Beschreibungsliste dl besteht aus zwei Spalten, deren erste sich am vorhandenen Inhalt ausrichtet. Die zweite nimmt den verfügbaren restlichen Raum ein.
Der dt-Ausdruck beginnt an der ersten Rasterlinie, also in der 1. Spalte, die Beschreibungen dd immer in der zweiten.
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.
