<dt> and <dd> elements must be contained in a <dl>.

The <dt> (definition term) and <dd> (definition description) elements are only meaningful when they appear inside a <dl> (definition list) element. When <dt> or <dd> elements exist outside of a <dl>, browsers and assistive technologies treat them as generic text with no structural meaning. The relationship between a term and its definition is lost.

Screen reader users rely on proper semantic structure to understand content. When a screen reader encounters a well-formed <dl>, it announces the list, the number of items, and the relationship between terms and their descriptions. A <dt> or <dd> sitting outside a <dl> is just another block of text with no announced role, so users have no way to know that one piece of text defines another.

This rule maps to WCAG 2 Success Criterion 1.3.1 (Info and Relationships), which requires that information and relationships conveyed through visual presentation are also available programmatically. If terms and definitions look paired visually (through styling or layout) but lack the correct <dl> wrapper, sighted users get context that assistive technology users do not.

How to fix it

Find any <dt> or <dd> elements that are not wrapped in a <dl> and move them inside one. Each <dl> should contain one or more <dt> elements followed by one or more <dd> elements. You can also have multiple term/description groups within a single <dl>.

If the content is not actually a term-and-definition pair, a <dl> may not be the right element. Consider whether a heading and paragraph, a table, or another structure better fits the content.

Examples

Incorrect: <dt> and <dd> outside a <dl>

<div>
  <dt>Bandwidth</dt>
  <dd>The maximum rate of data transfer across a network.</dd>
</div>

The <dt> and <dd> are inside a <div>, not a <dl>. Assistive technologies will not recognize these as a definition term and description.

Correct: <dt> and <dd> inside a <dl>

<dl>
  <dt>Bandwidth</dt>
  <dd>The maximum rate of data transfer across a network.</dd>
</dl>

Correct: multiple term/description groups in a single <dl>

<dl>
  <dt>Bandwidth</dt>
  <dd>The maximum rate of data transfer across a network.</dd>

  <dt>Latency</dt>
  <dd>The delay before a transfer of data begins following an instruction.</dd>
</dl>

Correct: wrapping groups in <div> elements for styling

The HTML spec allows <div> elements as direct children of <dl> to group each term/description pair. This is useful for applying CSS without breaking semantics.

<dl>
  <div>
    <dt>Bandwidth</dt>
    <dd>The maximum rate of data transfer across a network.</dd>
  </div>
  <div>
    <dt>Latency</dt>
    <dd>The delay before a transfer of data begins following an instruction.</dd>
  </div>
</dl>

Learn more:

W3C Reference

WCAG 2.1 Understanding Info and Relationships

→

MDN Reference

MDN: The Description List element

→

W3C Reference

WCAG 2.1 Technique H40: Using description lists

→