On The <dl> (2021)

Original Article ↗ Hacker News Discussion ↗

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.