The Underused <dl> Element: HTML's Semantic Tool for Name-Value Pairs

The description list element trio—

,

, and

—offers a semantic way to mark up name-value pair patterns that developers routinely build with nested

s instead. A

wraps the list,

holds each name (term), and

holds the corresponding value (detail). One term can pair with multiple details, and a single

wrapper is permitted around term/detail groups for styling purposes.

The semantic payoff comes through assistive technology. Screen readers that recognize description lists can announce the total number of pairs, indicate the user’s position within the list, and let users skip the block entirely—affordances that vanish when the same content is built from generic divs and text nodes. Browser and screen reader support is still uneven, so a

fallback may be appropriate in some cases.

The pattern is more versatile than it appears: book metadata, lodging amenities, itemized charges, glossaries, and even Dungeons & Dragons statblocks (which can contain several nested description lists) all fit the model. The broader heuristic is useful beyond this one element—if a computer recognizing a pattern could plausibly improve the user experience, that pattern is a candidate for semantic markup.