Zum Inhalt springen

Das HTML-Element <dl> – Beschreibungslisten richtig nutzen

Share on:

Auf den Punkt: Das HTML-&lt;dl&gt;-Element ist flexibler als gedacht: Ein Begriff kann mehrere Beschreibungen haben, optionale &lt;div&gt;-Gruppierung ist möglich, und ARIA-Labels unterstützen die Barrierefreiheit. Seit 2008 heißen sie offiziell "Description Lists".

Simon Willison hat über die vielfältigen Einsatzmöglichkeiten des HTML-Elements &lt;dl&gt; berichtet. Ben Meyers Artikel offenbart dabei weniger bekannte Details zur Struktur und Semantik von Beschreibungslisten, die seit HTML5 so genannt werden.

Das HTML-Element <dl> bietet mehr Flexibilität als viele Entwickler:innen wissen. So können mehrere Definitionen oder Beschreibungen (<dd>) auf einen Begriff (<dt>) folgen. Zur Strukturierung lassen sich <dt> und <dd> optional in <div>-Elementen gruppieren – allerdings nur mit exakt einem Begriff-Beschreibungs-Paar pro Container. Eine Etikettierung ist mittels ARIA-Attributen möglich.

Die Bezeichnung hat sich seit einem HTML5-Entwurf von 2008 von „Definition Lists“ zu „Description Lists“ gewandelt, was die breitere Anwendbarkeit widerspiegelt. Adrian Roselli hat zudem wertvolle Hinweise zur Unterstützung durch Screen Reader zusammengetragen, die bei der barrierefreien Implementierung helfen.

Share on:
Schlagwörter: