The HTML `<dl>` (description list) element is an underused but versatile semantic element for marking up name–value pairs. It consists of three elements: `<dl>` (the list container), `<dt>` (description term/name), and `<dd>` (description detail/value). One `<dt>` can have multiple `<dd>` children, and groups can be wrapped in a `<div>` for styling. Using semantic markup over generic `<div>` nesting gives screen readers the ability to announce list length, position, and allow users to skip the block. Support across browser/screen reader combinations is broad but not universal. The post illustrates the pattern's versatility with examples ranging from book metadata to D&D stat blocks.
Table of contents
IntroductionThe Anatomy of a Description ListWhy Do We Need Semantics For This Anyways?Okay, Okay, One Last Example!TakeawaysFootnotesSort: