HTML Guides for dd

Within a <dl>, each name should appear in only one <dt>, so a term with several values gets one <dt> followed by several <dd> elements.

A description list is a set of name-value groups, and the HTML specification says a single <dl> should not have more than one <dt> for each name. When the same term shows up twice with different values, readers can't tell whether the second entry replaces the first, adds to it, or is a mistake. Repeated terms often come from lists built from data, such as product specifications where one attribute is output twice.

The validator compares the text content of each <dt>. It ignores markup and leading or trailing whitespace, so <dt><b>Size</b></dt> and <dt> Size </dt> both count as Size. The comparison is case-sensitive, so Size and size are different names. Wrapping each group in a <div> doesn't help, because the check covers the whole <dl>. Along with this warning, the validator adds a second message pointing to the first <dt> with that name.

If both values belong to the same term, keep one <dt> and put each value in its own <dd>. If the entries describe different things that share a label, give each <dt> a distinct name, or move them into separate <dl> elements, since the rule applies only within a single list.

Invalid example

<dl>

<dt>Size</dt>

<dd>Small</dd>

<dt>Color</dt>

<dd>Red</dd>

<dt>Size</dt>

<dd>Medium</dd>

</dl>

Valid example

<dl>

<dt>Size</dt>

<dd>Small</dd>

<dd>Medium</dd>

<dt>Color</dt>

<dd>Red</dd>

</dl>

Valid example with distinct names

<dl>

<dt>Net weight</dt>

<dd>1.2 kg</dd>

<dt>Gross weight</dt>

<dd>1.4 kg</dd>

</dl>

The <dl> element represents a description list — a collection of terms (<dt>) paired with their descriptions (<dd>). According to the HTML specification, the permitted content of a <dl> is either groups of <dt> and <dd> elements directly, or <div> elements that wrap those groups. This <div> wrapping option exists specifically to help with styling, since it lets you apply CSS to a term-description pair as a unit.

However, these wrapper <div> elements are not general-purpose containers inside <dl>. The spec requires that each <div> inside a <dl> contains at least one <dt> or <dd> child. A <div> that is empty, or that contains other elements like <span>, <p>, or another <div>, violates this rule and produces a validation error.

This matters for several reasons. Screen readers and assistive technologies rely on the semantic structure of description lists to convey the relationship between terms and definitions. An empty or improperly structured <div> inside a <dl> breaks that semantic contract, potentially confusing both assistive technology and browsers. Keeping your markup valid also ensures consistent rendering across all browsers.

How to Fix It

1. Ensure every <div> inside a <dl> contains at least one <dt> or <dd> — don't leave wrapper <div> elements empty.
2. Don't put non-<dt>/<dd> content directly inside these <div> wrappers — elements like <span>, <p>, or nested <div> elements should be placed inside a <dt> or <dd>, not as siblings to them.
3. Remove unnecessary <div> wrappers — if a <div> inside a <dl> serves no styling or grouping purpose, remove it entirely.

Examples

❌ Empty <div> inside a <dl>

<dl>

<div>

</div>

<div>

<dt>HTML</dt>

<dd>A markup language for structuring web content.</dd>

</div>

</dl>

The first <div> is empty and has no <dt> or <dd> child, triggering the error.

❌ <div> with only non-<dt>/<dd> children

<dl>

<div>

<p>This is a description list:</p>

</div>

<div>

<dt>CSS</dt>

<dd>A style sheet language for describing presentation.</dd>

</div>

</dl>

The first <div> contains a <p> element but no <dt> or <dd>, which is invalid.

✅ Each <div> contains <dt> and <dd> elements

<dl>

<div>

<dt>HTML</dt>

<dd>A markup language for structuring web content.</dd>

</div>

<div>

<dt>CSS</dt>

<dd>A style sheet language for describing presentation.</dd>

</div>

</dl>

✅ Using <dl> without <div> wrappers

If you don't need <div> elements for styling, you can place <dt> and <dd> directly inside the <dl>:

<dl>

<dt>HTML</dt>

<dd>A markup language for structuring web content.</dd>

<dt>CSS</dt>

<dd>A style sheet language for describing presentation.</dd>

</dl>

✅ A <dt> with multiple <dd> descriptions in a <div>

A single term can have multiple descriptions. The <div> is valid as long as it contains at least one <dt> or <dd>:

<dl>

<div>

<dt>JavaScript</dt>

<dd>A programming language for the web.</dd>

<dd>Supports event-driven and functional programming.</dd>

</div>

</dl>

The <dl> element represents a description list — a collection of name-value groups where <dt> elements provide the terms (or names) and <dd> elements provide the associated descriptions (or values). According to the HTML specification, the content model for <dl> requires that each <dt> group be followed by one or more <dd> elements. A <dl> with only <dt> elements and no <dd> elements is invalid HTML.

This matters for several reasons. Assistive technologies like screen readers rely on the proper <dt>/<dd> pairing to convey the relationship between terms and their descriptions. A description list without descriptions is semantically meaningless — it's like having a dictionary with words but no definitions. Browsers may also render the list inconsistently when the expected structure is incomplete.

Common causes of this error include:

• Accidentally using <dl> and <dt> to create a simple list instead of using <ul> or <ol>.
• Dynamically generated content where the <dd> elements are missing due to empty data.
• Incomplete markup where the developer forgot to add the description elements.

To fix this issue, make sure every <dt> element inside a <dl> is followed by at least one <dd> element. If you don't actually need a description list, consider using a different element like <ul> for simple lists.

Examples

Invalid: <dl> with only <dt> and no <dd>

<dl>

<dt>The Meaning of Life</dt>

</dl>

This is invalid because the <dt> term has no corresponding <dd> description.

Fixed: Adding a <dd> element

<dl>

<dt>The Meaning of Life</dt>

<dd>A philosophical question about the significance of existence.</dd>

</dl>

Invalid: Multiple terms without any descriptions

<dl>

<dt>HTML</dt>

<dt>CSS</dt>

<dt>JavaScript</dt>

</dl>

This triggers the error because none of the terms have associated descriptions.

Fixed: Each term with a description

<dl>

<dt>HTML</dt>

<dd>A markup language for structuring web content.</dd>

<dt>CSS</dt>

<dd>A style sheet language for describing presentation.</dd>

<dt>JavaScript</dt>

<dd>A programming language for web interactivity.</dd>

</dl>

Valid: Multiple terms sharing a single description

Multiple <dt> elements can share a single <dd>, which is useful for synonyms or aliases:

<dl>

<dt>Laptop</dt>

<dt>Notebook</dt>

<dd>A portable personal computer with a clamshell form factor.</dd>

</dl>

Valid: A single term with multiple descriptions

A <dt> can also be followed by multiple <dd> elements:

<dl>

<dt>Python</dt>

<dd>A large constricting snake.</dd>

<dd>A high-level programming language.</dd>

</dl>

Valid: Using <div> to wrap name-value groups

The HTML spec allows wrapping each <dt>/<dd> group in a <div> for styling purposes. Each <div> must still contain at least one <dd>:

<dl>

<div>

<dt>Name</dt>

<dd>Jane Doe</dd>

</div>

<div>

<dt>Email</dt>

<dd>jane@example.com</dd>

</div>

</dl>

Alternative: Use <ul> when descriptions aren't needed

If you only need a list of items without descriptions, a <dl> is the wrong element. Use an unordered list instead:

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

This message points to the first <dt> in a <dl> whose name is repeated later in the same list.

It always comes with a duplicate dt name warning on the later <dt>. Together, the two messages show where each copy of the term is, so you can compare them and decide which one to keep. The HTML specification says a single <dl> should not have more than one <dt> for each name.

The validator compares the text content of each <dt>. It ignores markup and leading or trailing whitespace, so <dt><b>Size</b></dt> and <dt>Size</dt> have the same name. The comparison is case-sensitive, so Size and size don't clash.

The first <dt> is usually fine on its own; the fix goes where the name repeats. If both entries describe the same term, keep one <dt> and give each value its own <dd>. If they describe different things, give each <dt> a distinct name. Once every name in the list is unique, both messages go away.

Invalid example

<dl>

<dt>Size</dt>

<dd>Small</dd>

<dt>Color</dt>

<dd>Red</dd>

<dt>Size</dt>

<dd>Medium</dd>

</dl>

Valid example

<dl>

<dt>Size</dt>

<dd>Small</dd>

<dd>Medium</dd>

<dt>Color</dt>

<dd>Red</dd>

</dl>