In HTML, what is a <dl> for, and what are the rules for pairing <dt> and <dd> inside it?
answer
- names paired with values, not just definitions
- one or more on each side of the pair
- term first, description after
- an optional wrapper, all-or-nothing
- terms may not contain headings or sections
basics
~20 sA <dl> is a description list of name-value groups. Each group is one or more <dt> terms followed by one or more <dd> descriptions, so several names can share a description or one name can have several. Optionally each group may be wrapped in a single <div>.
solid answer
~50 s`<dl>` marks up an association between names and values — metadata pairs, a glossary, product specifications — which is why HTML calls it a *description* list rather than a definition list. Its content model is a sequence of groups, each being one or more `<dt>` elements followed by one or more `<dd>` elements. That cardinality is the interesting part: several `<dt>`s before one `<dd>` express synonyms sharing a description, and several `<dd>`s after one `<dt>` express multiple values for the same name. You may optionally wrap each group in a single `<div>` when you need a styling or template hook, but then *every* group must be wrapped — you cannot mix bare `<dt>`/`<dd>` with `<div>`-wrapped groups in the same list. `<dt>` also forbids heading, sectioning, `<header>`, and `<footer>` content inside it. Support in screen readers is uneven, so do not rely on the element alone to make the relationship clear.
code
html · 8 lines<dl>
<dt>Autumn</dt>
<dt>Fall</dt>
<dd>The season between summer and winter.</dd>
<dt>Authors</dt>
<dd>Ada Lovelace</dd>
<dd>Grace Hopper</dd>
</dl>go deeper
Recognise <dl> as the element for name-and-value content such as specifications or metadata, and write the term first with its description after it.
Explain the group cardinality — one or more <dt> followed by one or more <dd> — and know the optional all-or-nothing <div> wrapper and the exclusions on what <dt> may contain.
Judge when the content really has name-value shape versus when it is a flat list or genuinely tabular, and note honestly that screen-reader support for description lists is uneven so the text must read sensibly in source order.
Set the house convention for structured metadata across the product, so specification blocks and key-value summaries use one consistent, validated pattern rather than each team inventing a two-column layout.
## What a description list is actually for `<dl>` is the element for a list of name-value groups. HTML5 renamed it from "definition list" to "description list" precisely because it was never restricted to dictionary definitions. Genuine uses: - product specifications (Weight → 1.2 kg, Material → aluminium) - article metadata (Author → …, Published → …) - a glossary of terms - key-value summaries of any kind The semantic claim it makes is narrow and specific: *these names go with these values*. If your content does not have that shape, `<dl>` is the wrong element. ## The grouping rules The content model is a sequence of groups. A group is one or more `<dt>` elements, followed by one or more `<dd>` elements. Script-supporting elements (`<script>`, `<template>`) may be intermixed. Nothing else may be a direct child. That one-or-more on both sides is the rule interviewers actually probe: ```html <dl> <!-- several names sharing one description --> <dt>Autumn</dt> <dt>Fall</dt> <dd>The season between summer and winter.</dd> <!-- one name with several values --> <dt>Authors</dt> <dd>Ada Lovelace</dd> <dd>Grace Hopper</dd> </dl> ``` A `<dd>` before its `<dt>` is invalid — the term always comes first. A group with a `<dt>` and no `<dd>`, or a `<dd>` with no preceding `<dt>`, is also invalid. ## The optional <div> wrapper The modern spec permits a second form: the `<dl>` contains only `<div>` elements (plus script-supporting elements), each `<div>` holding one group's `<dt>`s and `<dd>`s. ```html <dl> <div> <dt>Weight</dt> <dd>1.2 kg</dd> </div> <div> <dt>Material</dt> <dd>Aluminium</dd> </div> </dl> ``` This exists because pairs are hard to address as a unit otherwise — a template that renders one group at a time, or a design that needs a per-group container, has nowhere to put it. The constraint is that you must pick one form for the whole list: all groups wrapped, or none. A `<dl>` containing some bare `<dt>`/`<dd>` and some `<div>`-wrapped groups is invalid. ## What may go inside <dt> and <dd> `<dd>` takes flow content — paragraphs, lists, images, whatever the value needs. `<dt>` takes flow content too, but with exclusions: no heading content (`<h1>`–`<h6>`), no sectioning content (`<article>`, `<section>`, `<nav>`, `<aside>`), and no `<header>` or `<footer>` descendants. The intent is that a term is a short label, not a document section; if you find yourself wanting a heading inside a `<dt>`, the content is probably sections with headings rather than a description list. ## Assistive-technology support, stated honestly `<dt>` and `<dd>` map to the ARIA `term` and `definition` roles. Support for description lists across screen readers is less consistent than for `<ul>`/`<ol>`, and how (or whether) the term/value pairing is announced varies. The practical rule: use `<dl>` because it is the honest description of the content, but never rely on the element *alone* to communicate the relationship. The text should read sensibly in source order — "Weight", "1.2 kg" — so the pairing survives even where the semantics are announced weakly. ## Where people misuse it The spec itself rules out one case explicitly: `<dl>` is not for dialogue. Speaker-and-line is not a name-value association, and there is no ordering or attribution semantics in a description list. Two more misuses come up in reviews. Using `<dl>` for a form's label/control pairs looks tempting because forms are name-value shaped, but form controls already have `<label>` to create the association and a fieldset to group them, so the description list adds a second, weaker relationship on top. And using `<dl>` as a generic two-column layout device — because the default indentation happens to look right — is the same category error as using a table for layout: the element asserts a relationship the content does not have. ## Choosing between <dl> and the alternatives If items are a flat set with no names attached, use `<ul>`. If they are a sequence where order matters, `<ul>` is wrong and `<ol>` is right. If the data has more than one value dimension per row — a name plus several distinct columns — you have a data table, not a description list. `<dl>` earns its place at exactly one shape: names paired with their values.
- Why does HTML allow several <dt> elements before a single <dd>?Because several names can share one value — synonyms or aliases such as "Autumn" and "Fall" pointing at the same description. The grouping is defined as one-or-more terms followed by one-or-more descriptions precisely so both directions work: many names to one value, or one name to many values.
- When would you reach for a data table instead of a <dl>?When each row has more than one value dimension. A description list associates a name with its value or values and nothing more; the moment you need two or more distinct columns per row, the relationships are two-dimensional and belong in tabular markup, where each cell can be associated with both its row and its column.
- Is it valid to wrap only some groups of a <dl> in <div> elements?No. The spec offers two forms — bare `<dt>`/`<dd>` groups, or a `<dl>` whose children are all `<div>` groups — and you must commit to one for the whole list. Mixing the two is a conformance error, so a template that conditionally adds the wrapper will produce invalid markup.
saying these in an interview costs you the question
- Says dl is only for dictionary definitions
- Thinks each dt must be followed by exactly one dd
- Uses dl for dialogue or speaker lines
- Puts a heading inside a dt
- Mixes div-wrapped and bare groups in one dl