Beschreibungs-Listen erstellen im HTML5
Definitions-Listen erstellen im HTML5
Zu diesem Thema Definitions Listen existiert noch folgender Artikel: Definitions Listen im HTML.
HTML enthält eine Art von Liste, die speziell dafür gedacht ist, die Beziehung zwischen Namen oder Begriffen und Werten in Gruppen zu beschreiben. In früheren Versionen von HTML nannte man das Definitions-Listen und in HTML5 heißen sie nun Beschreibungs-Listen.
So steht es in der HTML5-Spezifikation: Name-Wert-Gruppen können Begriffe und Definitionen, Metadatenthemen und Werte, Fragen und Antworten oder eine andere Gruppe mit Name-Wert-Daten sein. Jede Liste ist in einem dl enthalten und jede Name-Wert-Gruppe darin hat ein oder mehrere dt-Elemente, gefolgt von einem oder mehreren dd-Elementen. Bild 1 zeigt ein einfaches Beispiel einer Beschreibungs-Liste. Abgesehen von dem Text, der mit einer einfachen Formatierungsregel fett wird, wird sie standardmäßig wie in Bild 2 dargestellt.
Sie können die Begriffe in den dt-Elementen noch zusätzlich formatieren, damit sie sich besser abheben.
dt {
font-weight: bold;
}
Das definierte Wort (das dt) wird standardmäßig linksbündig ausgerichtet und der Wert dd wird eingerückt. Die Namen werden dank der einfachen Regel in fett dargestellt. Andernfalls wäre das normaler Text.
Dies ist die einfachste Art einer Beschreibungs-Liste, mit einem dt, das einem dd in jeder Name-Wert-Gruppe zugeordnet ist. Jede Gruppe wird durch eine leere Zeile getrennt, das dient einfach nur der besseren Lesbarkeit des Codes. Der Abstand zwischen den Gruppen ist nicht erforderlich, ändert die Bedeutung des Inhalts nicht und wirkt sich nicht auf dessen Darstellung aus.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<dl>
<dt>HTML5 Info</dt>
<dd>Die neuen Features von HTML5 ist die fünfte Fassung der Hypertext Markup Language, einer Computersprache zur Auszeichnung und Vernetzung von Texten und anderen Inhalten elektronischer Dokumente.</dd>
<dt>HTML5 Web-Layouts</dt>
<dd>So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.</dd>
</dl>
</body>
</html>
Die folgenden Ausgestaltungen sind für eine Gruppe von dt- und dd-Elementen in einem dl möglich:
- Ein einzelnes
dt, gruppiert mit einem einzelnendd. So etwas wird am häufigsten eingesetzt. - Ein einzelnes
dt, gruppiert mit mehrerendd-Elementen. - Mehrere
dt-Elemente, die mit einemddgruppiert sind (mit einer beispielhaften Formatierung, das im Bild gezeigt wird). - Mehrere
dt-Elemente, gruppiert mit mehrerendd-Elementen.
Nutzen Sie das Element dfn (definition) um die Namen in den dts, um anzuzeigen, dass die Liste Begriffe definiert, z.B. wie in einem Glossar.
Dieses Beispiel enthält mehrere dts, gepaart mit einem einzelnen dd in jeder Name-Wert-Gruppe, weil die definierten Begriffe mehr als eine Schreibweise haben, aber die gleiche Definition bekommen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<dl>
<dt><dfn>HTML5 Multimedia</dfn>, n.</dt>
<dt><dfn>HTML5 Grafik-Canvas</dfn>, n.</dt>
<dd>Im HTML nannte man das Definitions-Listen und in HTML5 heißen sie nun Beschreibungs-Listen</dd>
<dt><dfn lang="de-de">Definitions-Listen</dfn>, n.</dt>
<dt><dfn>Definitions-Listen</dfn>, n.</dt>
<dd>...</dd>
</dl>
</body>
</html>
Dadurch bekommen die Name-Wert-Gruppen etwas mehr Abstand, als sie standardmäßig sonst hätten.
dd + dt {
margin-top: 1em;
}
Nun können Sie genau sehen, wo eine Gruppe von Beschreibungen aufhört und die nächste beginnt. Die Regel funktioniert, weil Definitions-Listen, n. in einem dt direkt nach dem dd aus der vorigen Name-Wert-Gruppe enthalten ist.
Sie können auch Beschreibungs-Listen verschachteln und sie nach Belieben mit CSS formatieren. Wenn ein dl in einem anderen verschachtelt ist, wird es standardmäßig automatisch um eine Stufe eingerückt (das können Sie natürlich auch mit CSS ändern).
Beschreibungs-Listen erstellen
- Tippen Sie
<dl>. - Tippen Sie
<dt>. - Geben Sie zusammen mit allen zusätzlichen semantischen Elementen (wie dfn) ein Wort oder einen kurzen Satz ein, das/der definiert oder erklärt werden soll.
- Mit
</dt>schließen Sie den Namen in der Name-Wert-Gruppe ab. - Wiederholen Sie bei Bedarf die Schritte 2 bis 4, falls es in der Gruppe mehr als einen Namen oder Begriff gibt.
- Tippen Sie
<dd>. - Geben Sie die Definition des in Schritt 3 eingegebenen Begriffs ein.
- Mit
</dd>schließen Sie die Beschreibung (den Wert) in der Name-Wert-Gruppe ab. - Wiederholen Sie bei Bedarf die Schritte 6 bis 8, falls es in der Gruppe mehr als einen Namen oder Begriff gibt.
- Wiederholen Sie die Schritte 2 bis 9 für jede Gruppe mit Begriffen und Beschreibungen.
- Mit
</dl>schließen Sie die Definitionsliste ab.
Hier ist das Beispiel einer Beschreibungs-Liste, in der verschiedene Kategorien von HTML5 aufgeführt sind. Die Namen der Kategorien stehen in einer verschachtelten Beschreibungs-Liste. Sie können die verschachtelte Liste auf Wunsch auch anders formatieren.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<dl>
<dt>HTML</dt>
<!-- Kategorie -->
<dd>HTML Multimedia</dd>
<dd>HTML Grafik Canvas</dd>
<dt>HTML5</dt>
<!-- Kategorie -->
<dd>HTML5 Multimedia</dd>
<dd>HTML5 Grafik Canvas</dd>
<dt>CSS</dt>
<dd>
<!-- Beginn der verschachtelten Liste -->
<dl>
<!-- Kategorie -->
<dt>CSS Design</dt>
<dd>CSS Formulare</dd>
<!-- Kategorie -->
<dt>CSS Hyperlink</dt>
<dd>CSS Listen</dd>
</dl>
<!-- Ende verschachtelte Liste -->
</dd>
</dl>
</body>
</html>
Ich will die Begriffe in der Hauptliste von denen abheben, die darin verschachtelt sind. Also formatiere ich dt-Elemente mit Großbuchstaben und dann setze ich alle dt-Elemente in einer verschachtelten dl zurück auf normal (anhand der Deklaration text-transform: none). Aber achten Sie darauf, dass alle Begriffe in fett dargestellt werden, weil die Deklaration in der ersten Regel auf alle dt-Elemente angewendet wird und ich das in der verschachtelten Liste nicht abgeschaltet habe.
dt {
font-weight: bold;
text-transform: uppercase;
}
/* Formatiere das dt aller dls, die sich in einem ➝ anderen dl befinden */
dl dl dt {
text-transform: none;
}
dd + dt {
margin-top: 1em;
}
Wenn ein dl in einem anderen verschachtelt ist, wird es standardmäßig automatisch um eine Stufe eingerückt. Mit den Formatierungen sind die dt-Elemente der ersten Ebene in Großbuchstaben, während die anderen in den verschachtelten Listen normal sind. Alle sind fett gedruckt.
Beschreibungs-Listen
Beschreibungs-Listen sind für Listen mit Name-Wert-Zuordnungen gedacht. Damit eignen sie sich zur Abbildung von Konfigurationsdaten, aber auch für Glossare und für jede Art von Liste, bei der es bestimmte Felder gibt, denen Werte zugeordnet werden.
Beispiel
<dl>
<dt>HTML</dt>
<dd>Die Gestaltung Ihrer eigenen Webseite mit HTML.</dd>
<dt>HTML5</dt>
<dd>Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5.</dd>
<dt>CSS</dt>
<dd>CSS geben Ihnen die vollständige kreative Kontrolle über das Layout und die Gestaltung Ihrer Webseiten.</dd>
<!-- usw. -->
</dl>
<dl>
<dt>HTML5 Multimedia</dt>
<dd>HTML5 bietet neue Möglichkeiten, um Audio- und Videodateien in Seiten einzubetten.</dd>
<dt>HTML5 Grafik-Canvas</dt>
<dd>Zu Beginn verbringen wir einige Zeit damit, mit dem neuen HTML5-Element canvas Grafiken zu erstellen.</dd>
<dt>HTML5 Tabelle</dt>
<dd>Tabellen dienen der einfachen Darstellung der verschiedensten Informationen.</dd>
<dt>HTML5 Formulare</dt>
<dd>In HTML5 werden mehrere neue Typen von Eingabefeldern eingeführt, mit denen Sie den Datentyp besser beschreiben können.</dd>
<!-- usw. -->
</dl>
Info
<dl> ... </dl> markiert die gesamte Beschreibungs-Liste (dl = description list = Beschreibungs-Liste).
<dt> ... </dt> markiert einen zu beschreibenden Ausdruck (dt = description list term = Ausdruck).
<dd> ... </dd> markiert die Beschreibung des Ausdrucks (dd = description list description = Beschreibung).
Das dl-Element darf nichts anderes als aufeinanderfolgende dt- und dd-Elemente enthalten. dt- und dd-Elemente dürfen Text und andere HTML-Elemente enthalten, das dt-Element allerdings nur sogenannten Phrasing-Content, d. h. keine anderen gruppierenden Elemente oder Elemente für Web-Seitenbereiche.
Info
Per Voreinstellung stellen grafische Browser die Liste so dar, dass dd-Elemente gegenüber dt-Elementen eingerückt erscheinen. Beide Elemente erzeugen eine neue Zeile im Textfluss. Mit Hilfe von CSS bzw. CSS-Eigenschaften können Sie die Erscheinung optimieren.
Beschreibungs-Listen sollen nicht zur Darstellung von szenischen Dialogen verwendet werden. Das war in HTML5 ursprünglich angedacht, wurde jedoch wieder verworfen. Für szenische Dialoge gibt es keine speziellen HTML-Strukturelemente.