HTML Guides for dd

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>