On The <dl> (2021)

Original Article ↗ Hacker News Discussion ↗

HTML developers are revisiting the underrated `<dl>` (description list) element as a semantic way to represent name–value data, from glossaries to key–value UIs like character sheets. Many value its cleaner markup and potential accessibility benefits, but note real-world hurdles: inconsistent screen reader behavior, awkward ARIA support, and styling challenges that often lead to extra `<div>` wrappers or fallback to tables and custom components. The exchange reflects a broader tension between semantic purity and practical concerns such as maintainability, CSS layout flexibility, and how much HTML’s growing tag set actually helps everyday development.

Use cases and styling of <dl>

  • Many commenters like <dl> for key–value data, glossaries, dictionaries, game character sheets, summary lists, nested JSON, and ebooks’ abbreviation/glossary lists.
  • Several highlight CSS Grid and Flexbox as good ways to lay out <dt> / <dd> pairs side‑by‑side without extra wrapper <div>s.
  • Others note real‑world design systems (e.g., government summary lists) still use wrapper <div>s, citing easier documentation and robustness across many use cases, even if “not strictly needed” with Grid.
  • Some worry about fixed pixel widths in the article’s examples; others point out the specific example CSS looks reasonably responsive.

Semantics, spec, and allowed structure

  • Thread clarifies: <dl> was renamed from “definition list” to “description list” in HTML5; several people still instinctively use the old name.
  • It’s valid to nest <dl> inside <dd> and to have multiple <dd>s and even multiple <dt>s in a row; the spec frames it as “name–value groups,” not strict pairs.
  • Only <div> is officially allowed as a wrapper inside <dl> for grouping terms/definitions, which surprises some; custom elements are not treated equivalently by the HTML parser.
  • Validators and MDN/spec links are cited for confirming correctness.

Accessibility and ARIA behavior

  • Support for <dl> is described as “generally good but quirky,” with inconsistent behavior across browsers and screen readers.
  • Commenters warn against “fixing” screen reader quirks by mangling HTML, since workarounds for one tool can break another; users also adapt to their reader’s behavior.
  • There’s criticism of using aria-label directly on <dl> without an appropriate ARIA role; suggestions include dropping it or adding role="list" and proper listitem roles, though actual browser mappings are inconsistent.
  • Some screen reader users in the thread express frustration with semantic purity that doesn’t translate into practical, predictable accessibility APIs.

Semantic HTML vs pragmatic <div>s

  • A recurring theme: tension between semantic richness and practical flexibility.
  • Some argue “everything is a <div>” is simpler; semantic tags often feel too constrained when you need extra wrappers, icons, or grouped headings.
  • Others defend semantics as valuable for accessibility, machine processing, and long‑term robustness, even if many developers treat tags purely as visual hooks.
  • There are broader side debates about <b> vs <strong>, <ul> vs <ol>, and whether HTML’s growing set of elements is overdesigned or necessary structure.