HeadlinesBriefing favicon HeadlinesBriefing.com

HTML's <dl> Element Deserves More Love Than Nested Divs

Hacker News •
×

A developer advocacy post argues that HTML's <dl> description list element gets overlooked despite being one of the most versatile semantic tools available. The element handles name-value pairs cleanly, from book metadata to rent charge breakdowns and technical glossaries. Most teams reach for nested <div>s instead, missing out on native accessibility signals.

The anatomy is straightforward: <dl> wraps <dt> and <dd> pairs, with support for multiple <dd> values per <dt>. Screenreaders can announce group counts, track position, and let users skip blocks entirely — concrete benefits that nested divs don't provide. The markup stays flat and readable rather than deeply nested.

The D&D stat block example seals the case. One author marked up a kobold stat block using five separate <dl> groups, covering ability scores, proficiencies, traits, and attacks. The element handled both compact tables and verbose descriptions without breaking. Semantic markup earns its keep when screenreaders act on it directly.