The Forgotten <dl> Element: Why It Deserves a Second Look

Confession time: when was the last time you used <dl> in a real project? If the answer is "never," you're not alone. This definition list tag lives in the shadow of <ul> and <ol>, like that quiet colleague who never speaks in meetings but then drops a genius solution. And that's a shame, because <dl> is perfect not just for glossaries, but also for metadata, key-value pairs, and even microdata.

What <dl> and its children <dt> and <dd> can do?

Per spec, <dl> groups a term (<dt>) with its description (<dd>). You can have one term with multiple descriptions or vice versa. Nesting works too. Sounds boring? Now imagine you're coding a product card — attributes come in "Name: Value" pairs. <dl> handles it without extra div wrappers or custom classes. Semantics, accessibility, and clean code — that's what you get.

Why did we forget <dl>?

Blame the hype around flexbox and grid, as usual. When you have a hammer (CSS layouts), everything looks like a nail. But let's be honest: how many times have you written <div class="item"><span class="label">...</span><span class="value">...</span></div> just because <dl> seemed "inconvenient"? Actually, <dl> is like a good old bicycle: not trendy, but reliable and without unnecessary parts.

How to use <dl> in 2024?

Browser support is excellent, and screen readers love it. SEO also gets a boost: search engines understand structured data better. Here's a simple example:

<dl>
  <dt>Name</dt>
  <dd>Super-duper framework</dd>
  <dt>Version</dt>
  <dd>42.0.1</dd>
  <dt>License</dt>
  <dd>MIT</dd>
</dl>

Clean, right? And if you need styling — a couple of CSS lines, and you're done. No extra span or div.

METABYTE studio comment: We too have a soft spot for div soup, but <dl> is a great candidate for refactoring. Especially when the client asks for "clean and semantic." Give it a try — your next project might thank you.