HTML Guides for dt

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>

An h2 heading cannot be placed inside a dt element.

The dt (definition term) element is only allowed to contain phrasing content, such as text or inline elements (e.g., span, a). Heading elements like h2, which are flow content, are not permitted within dt. Description lists should structure terms and their descriptions with dt for each term and dd for each description. To include headings within the flow of a description list, place the heading outside the dt and dd elements or directly before the list.

Invalid Example:

<dl>
  <dt>
    <h2>Heading Inside Term</h2>
    Term Title
  </dt>
  <dd>Description of the term.</dd>
</dl>

Valid Example — Place Heading Before the List:

<h2>Terms and Definitions</h2>
<dl>
  <dt>Term Title</dt>
  <dd>Description of the term.</dd>
</dl>

Valid Example — Place Heading Outside dt:

<dl>
  <dt>Term Title</dt>
  <dd>
    <h2>Description</h2>
    Description of the term.
  </dd>
</dl>

Always ensure that heading elements are not nested within dt elements to comply with HTML standards.