On the

2026-05-23 · Source: Simon Willison's Weblog · Field: Technology & Digital — Software Development & Engineering · Depth: Intermediate, quick

Summary

The article, dated 23rd May 2026, details several lesser-known aspects of the HTML `dl` element, now officially termed "description lists" since an HTML5 draft in 2008, rather than "definition lists." Key points include the ability for a single `dt` (description term) to be followed by multiple `dd` (description details) elements, as demonstrated by an example showing "Author" followed by two names. Additionally, `dt` and `dd` elements can be optionally grouped within a `div` for styling purposes, though the text notes this grouping specifically applies to a `dt`. The article also highlights the option to label these lists using ARIA attributes, enhancing accessibility. A link to Adrian Roselli's resource on screen reader support for description lists is provided.

Key takeaway

For web developers building accessible and semantically correct interfaces, understanding the modern `dl` element usage is crucial. You should utilize its capacity for multiple `dd` elements per `dt` to represent complex descriptions accurately. Consider grouping `dt` and `dd` pairs within `div`s for styling flexibility and always apply ARIA labels to enhance screen reader support, ensuring your content is accessible as a "description list."

Key insights

The HTML `dl` element, now a "description list," supports multiple `dd`s per `dt` and ARIA labeling for enhanced structure.

Principles

• HTML `dl` is a "description list."
• Multiple `dd`s can follow one `dt`.
• ARIA enhances `dl` element semantics.

In practice

• Group `dt`/`dd` in `div` for styling.
• Use ARIA to label `dl` elements.
• Leverage multiple `dd`s for complex terms.

Topics

• HTML dl Element
• Description Lists
• Web Accessibility
• ARIA Attributes
• Semantic HTML
• Screen Reader Support

Best for: Software Engineer, Product Designer, Product Manager

Related on AIssential

• Designing an A-Z navigation web component — An A-Z web component enhances navigation for long alphabetical lists by linking to closest available headings.
• Big Words — A web tool generates customizable text slides via URL query parameters for presentation integration.
• Publishing my citation preferences — Clearly stating citation preferences on a personal website enhances linking confidence for other bloggers.
• Living design systems in HTML are more effective than traditional design tools — HTML files can serve as dynamic, shareable design systems, enhancing collaboration and version control.
• Launching Interop 2026 — Cross-browser collaboration significantly improves web platform feature consistency and adoption.
• TriagerX: Dual Transformers for Bug Triaging Tasks with Content and Interaction Based Rankings — TriagerX uses dual transformers and interaction history to improve bug triaging recommendations.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by Simon Willison's Weblog.