Loading...
Loading...
Authors urge front-end developers to prefer HTML description lists (<dl>, <dt>, <dd>) over nested <div>s when marking up name–value pairs like metadata, specifications, glossaries, and billing items. Both articles explain the role and anatomy of description lists, show examples (including multiple <dd> values per <dt>), and note that grouping elements can be wrapped in a <div> for styling. The pieces emphasize that semantic markup improves clarity, accessibility, maintainability, and consumability by assistive technologies and search engines, reducing boilerplate and making intent explicit compared with nonsemantic, div-based structures.
Semantic markup with
// matters because it makes name–value pairs explicit for browsers, assistive technologies, and search engines, improving accessibility and data consumption. Front-end developers benefit from clearer intent, less boilerplate, and easier maintenance compared with nested s.Dossier last updated: 2026-05-23 21:22:14
The article advocates using HTML’s semantic description list elements — <dl>, <dt>, and <dd> — to represent name–value pairs instead of ad-hoc nested <div>s. It explains the anatomy: <dl> is the container, <dt> marks the term, and <dd> holds one or more details; groups can be wrapped in a <div> when styling requires it. The piece shows examples (book metadata like Title, Author, Publisher) and notes that one <dt> may pair with multiple <dd>s. It argues semantics improve clarity, maintainability, and accessibility compared with verbose classed <div> structures, making markup more meaningful for developers, browsers, and assistive technologies.
Developer-blogger Simon Willison highlighted practical details about the HTML <dl> (description list) element, linking to Ben Meyer’s explainer and Adrian Roselli’s accessibility notes. Key takeaways: a single <dt> can be followed by multiple <dd> items; you may wrap <dt>/<dd> pairs in a <div> for styling (only <div> is allowed); ARIA labeling can be used to connect lists to headings; and the tag has been called “description list” rather than “definition list” since a 2008 HTML5 draft. The post matters to web developers and accessibility-focused engineers because it clarifies valid markup patterns and screen-reader behavior, helping ensure semantic, styleable, and accessible HTML. Posted May 23, 2026 by Simon Willison.
The article explains the HTML description list (<dl>, <dt>, <dd>) as the semantic, accessible way to mark up name–value pairs (e.g., book metadata, amenities, glossary entries). It details the elements’ roles, shows examples including multiple <dd> for one <dt>, and demonstrates that wrapping term/detail groups in a <div> is permitted for styling. The author contrasts this with nested <div>-based structures, arguing semantics matter for clarity, maintainability, and accessibility. The piece underscores how using <dl> improves markup intent, reduces boilerplate classes, and benefits downstream consumers like assistive tech and search engines, making it a practical tool for front-end developers and content authors.
The article argues for using HTML's description list elements (<dl>, <dt>, <dd>) to semantically mark up name–value pairs instead of relying on nested <div>s. It explains the anatomy: a <dl> container with <dt> for terms and one or more <dd> for details, and notes that groups of a <dt> with its <dd>(s) may be wrapped in a <div> when needed. Examples show multiple values for a single term and how the semantic structure maps to common UI patterns like glossaries, specifications, and billing line items. The piece emphasizes that semantics improve clarity, accessibility, and maintainability compared with nonsemantic markup.