Dt and dd must be inside a dl element

dt and dd must not appear outside a parent dl element

Definition list items (dt and dd) must be direct children of a dl element. This error appears when snippets or CMS templates output dt/dd without a wrapping dl. It affects screen reader users who depend on semantic relationships to understand terms and their definitions.

Why It Matters

Screen readers announce definition lists and expose the relationship between each term and its description. Without a dl container, that structure is lost, and users hear unrelated text with no pairing.

People who rely on auditory cues or structured navigation waste time piecing together meaning. Clear info relationships are required by WCAG 2.2 Success Criterion 1.3.1 (Info and Relationships).

Invalid structure can also confuse automated tools, indexing, and styling, leading to inconsistent presentation.

Common Causes

• Pasting dt and dd fragments into a page without adding a dl wrapper.
• CMS/WYSIWYG or Markdown plugins that output raw dt/dd incorrectly.
• Using dl for layout instead of term–definition content.
• Rendering dt and dd from separate components so they don’t share one parent.
• Inserting other elements (e.g., headings or divs) directly inside dl alongside dt/dd.
• Incorrect order (e.g., dd appearing before its corresponding dt).

How to Fix

1. Wrap related term/definition pairs in a single dl.
2. Order them correctly: one or more dt immediately followed by one or more dd for that group.
3. Keep dl children limited to dt and dd (script and template are allowed in HTML, but avoid other elements). If you need headings or wrappers, place them outside the dl or inside a dd.
4. If the content is not terms and definitions, use a more suitable pattern (ul/ol for lists; table for tabular data).
5. Update CMS/templates so components output a dl parent around dt/dd.
6. Validate the HTML and run automated accessibility checks to catch regressions.

Recommendation: When multiple definitions apply to a single term, group them as consecutive dd elements following the term’s dt.

How to Test

• Visual/Code inspection:
• Open devtools and confirm every dt and dd is a direct child of a dl.
• Ensure no dd precedes its related dt.
• Check that no div/h1/etc. appears directly inside dl.
• HTML validation:
• Run the W3C Nu HTML Checker and fix any definition-list nesting errors.
• Screen reader check:
• Navigate to the list and confirm it’s announced as a “definition list” with the correct count.
• Move through each term and definition to verify reading order and relationships are accurate.
• Keyboard check:
• Tab through any focusable elements inside dd content. Focus order should follow the dt → dd sequence.
• Mobile/touch check:
• With VoiceOver or TalkBack, ensure the control announces a definition list and pairs are read in sequence.

Good Example

<dl>
  <dt>HTTP 404</dt>
  <dd>Resource was not found on the server.</dd>
  <dt>HTTP 200</dt>
  <dd>Request completed successfully.</dd>
</dl>

Bad Example

<div class="terms">
  <dt>Plan</dt>
  <dd>Monthly subscription with no contract.</dd>
  <dt>Trial</dt>
  <dd>Free for 14 days.</dd>
</div>

Quick Checklist

• Every dt and dd is a direct child of a dl.
• Each dd follows its related dt without unrelated content in between.
• No non-dt/dd elements appear directly inside dl.
• Use dl only for term–definition content, not layout.
• Multiple dd entries for a single dt are allowed and grouped together.
• Templates/components ensure dt/dd render inside one dl.
• HTML validates without definition-list nesting errors.
• Screen readers announce a definition list and read pairs in order.