Skip to content

The HTML Element <dl> – Using Description Lists Correctly

The gist: The HTML &lt;dl&gt; element is more flexible than commonly thought: a term can have multiple descriptions, optional &lt;div&gt; grouping is possible, and ARIA labels support accessibility. Since 2008 they have officially been called "Description Lists".

Simon Willison has reported on the diverse use cases of the HTML &lt;dl&gt; element. Ben Meyer’s article reveals lesser-known details about the structure and semantics of description lists, which have been called that since HTML5.

The HTML element <dl> offers more flexibility than many developers realize. Multiple definitions or descriptions (<dd>) can follow a single term (<dt>). For structuring, <dt> and <dd> can optionally be grouped in <div> elements – but only with exactly one term-description pair per container. Labeling is possible using ARIA attributes.

The term has evolved from “Definition Lists” to “Description Lists” since an HTML5 draft from 2008, reflecting broader applicability. Adrian Roselli has also compiled valuable information on screen reader support, which helps with accessible implementation.

Share on:
Tags: