<dl> elements must only contain <dt>, <dd>, <div>, <script>, <template>, or <style>.

A <dl> (definition list) element has strict rules about which child elements it can contain. The only valid direct children are <dt> (definition term), <dd> (definition description), <div> (used to group <dt>/<dd> pairs), and the metadata elements <script>, <template>, and <style>. When other elements like <span>, <p>, or <ul> appear as direct children of a <dl>, the semantic structure of the list breaks down.

Screen readers rely on the defined structure of a definition list to communicate relationships between terms and their descriptions. When a user navigates a well-formed <dl>, their assistive technology announces each term and its associated definition as a pair. If invalid elements appear inside the <dl>, screen readers may skip content, misrepresent the relationships between terms and definitions, or fail to convey the list structure entirely. This affects blind and low vision users who depend on screen readers to understand the page.

This rule maps to WCAG 2 Success Criterion 1.3.1 (Info and Relationships), Level A. That criterion requires that information and relationships conveyed through visual presentation are also available programmatically. A definition list that looks correct visually but contains invalid markup fails to convey its structure to assistive technology.

How to fix it

Check each direct child of your <dl> element. If an element is not a <dt>, <dd>, <div>, <script>, <template>, or <style>, take one of these actions:

• If the element is a term, change it to a <dt>.
• If the element is a definition or description, change it to a <dd>.
• If the element is a wrapper added for styling purposes (like a <span> or <li>), replace it with a <div> that contains the appropriate <dt> and <dd> children.
• If the element does not belong in the definition list at all, move it outside the <dl>.

When using <div> elements inside a <dl>, each <div> must contain at least one <dt> and at least one <dd>. The <div> is only valid as a grouping wrapper for term/definition pairs.

Examples

Invalid definition list with a <span> wrapper

The <span> is not a valid direct child of <dl>, so this breaks the list structure for screen readers.

<dl>
  <span>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
  </span>
  <span>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
  </span>
</dl>

Invalid definition list with a <p> element

A <p> element is not allowed as a direct child of <dl>.

<dl>
  <dt>Bandwidth</dt>
  <dd>The maximum rate of data transfer across a network.</dd>
  <p>Note: Measured in bits per second.</p>
</dl>

Fixed: using <div> wrappers instead of <span>

Replace <span> wrappers with <div> elements. Each <div> groups a <dt>/<dd> pair.

<dl>
  <div>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
  </div>
</dl>

Fixed: moving unrelated content outside the <dl>

The note does not belong in the definition list. Move it after the <dl>, or if it belongs with the definition, include it inside the <dd>.

<dl>
  <dt>Bandwidth</dt>
  <dd>The maximum rate of data transfer across a network.</dd>
</dl>
<p>Note: Measured in bits per second.</p>

Or, if the note is part of the definition:

<dl>
  <dt>Bandwidth</dt>
  <dd>
    The maximum rate of data transfer across a network.
    Measured in bits per second.
  </dd>
</dl>

Fixed: flat structure without wrappers

If you don't need <div> wrappers for styling, a flat structure with only <dt> and <dd> elements is valid and simple.

<dl>
  <dt>Latency</dt>
  <dd>The delay before data transfer begins.</dd>
  <dt>Throughput</dt>
  <dd>The amount of data moved successfully in a given time period.</dd>
</dl>

Learn more:

W3C Reference

Understanding Success Criterion 1.3.1: Info and Relationships

→

MDN Reference

HTML dl element

→