HTML <dd>-Tag
Das HTML <dd>-Tag liefert die Beschreibung eines Begriffs in einer Definitionsliste und wird zusammen mit <dl> und <dt> verwendet.
Das HTML-Tag <dd> (description details) liefert die Beschreibung eines Begriffs in einer Definitionsliste. Es funktioniert ausschließlich innerhalb eines <dl> (description list) und wird mit einem oder mehreren <dt>-Elementen (description term) kombiniert, die den beschriebenen Begriff benennen.
Die Gruppierung innerhalb eines <dl> ist flexibel — möglich sind:
- ein Begriff gefolgt von einer Beschreibung,
- ein Begriff gefolgt von mehreren Beschreibungen,
- mehrere Begriffe (Synonyme) gefolgt von einer Beschreibung,
- mehrere Begriffe gefolgt von mehreren Beschreibungen.
Das <dd>-Element kann weitere Inhalte enthalten: Absätze, Listen, Bilder, Links und so weiter. Es steht innerhalb von <body> als Kind-Element von <dl>. Browser rücken <dd> standardmäßig mit einem linken Rand ein, sodass die Beschreibung optisch unterhalb des Begriffs erscheint.
Wann eine Definitionsliste verwenden
Verwenden Sie <dl>/<dt>/<dd> für Name-Wert-Paare — Inhalte, bei denen jeder Eintrag eine Bezeichnung und eine zugehörige Beschreibung ist. Gute Einsatzmöglichkeiten sind:
- Glossare — ein Wort und seine Bedeutung.
- FAQs — eine Frage (
<dt>) und ihre Antwort (<dd>). - Produktdatenblätter / Metadaten — Eigenschaften wie „Gewicht", „Material", „SKU" und deren Werte.
Greifen Sie nicht auf eine Definitionsliste zurück, nur weil Sie einen Einzug wünschen oder eine beliebige Abfolge von Elementen ohne Bezeichnung darstellen möchten. Für geordnete Schritte verwenden Sie eine geordnete Liste (<ol>); für eine einfache Aufzählung verwenden Sie eine ungeordnete Liste (<ul>). Wählen Sie eine Definitionsliste nur dann, wenn jeder Eintrag tatsächlich ein Begriff mit zugehöriger Beschreibung ist.
Syntax
Das <dd>-Tag wird als Paar verwendet. Der Inhalt steht zwischen dem öffnenden (<dd>) und dem schließenden (</dd>) Tag und muss innerhalb eines <dl> nach einem oder mehreren <dt>-Elementen stehen.
Beispiel: ein Glossar
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Coffee glossary</h1>
<dl>
<dt>Espresso</dt>
<dd>A concentrated coffee brewed by forcing hot water through finely-ground beans.</dd>
<dt>Latte</dt>
<dd>Espresso with a large amount of steamed milk and a light layer of foam.</dd>
<dt>Americano</dt>
<dd>Espresso diluted with hot water for a lighter, longer drink.</dd>
</dl>
</body>
</html>Beispiel: ein Produktdatenblatt
Ein einzelner Begriff kann auch mehrere <dd>-Beschreibungen haben, und mehrere <dt>-Begriffe können sich eine <dd> teilen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Backpack specifications</h2>
<dl>
<dt>Capacity</dt>
<dd>28 liters</dd>
<dt>Material</dt>
<dd>Recycled polyester</dd>
<dd>Water-resistant coating</dd>
<dt>Color</dt>
<dt>Colour</dt>
<dd>Charcoal grey</dd>
</dl>
</body>
</html>Barrierefreiheit
Das <dd>-Element hat die implizite ARIA-Rolle definition, und <dt> hat die Rolle term. Assistive Technologien nutzen die <dl>-Struktur, um jede Beschreibung zusammen mit dem zugehörigen Begriff anzukündigen. Daher macht semantisches Markup (anstatt eine Liste mit <div>s und CSS nachzuahmen) den Inhalt leichter navigierbar. Fügen Sie kein explizites role-Attribut hinzu — die implizite Rolle ist bereits korrekt.
Attribute
Das <dd>-Tag hat keine elementspezifischen Attribute. Es unterstützt nur die globalen Attribute und die Event-Attribute.
Einen HTML-<dd>-Tag stylen
Browser wenden einen standardmäßigen linken Rand (typischerweise 40px) auf <dd> an. Sie können diesen mit CSS entfernen oder ersetzen — zum Beispiel den Einzug aufheben und eigenes Padding sowie Styling hinzufügen:
dd {
margin-left: 0; /* remove the default left indent */
padding-left: 1rem; /* add your own spacing instead */
color: #555;
}
dt {
font-weight: bold;
}