definition-list

Description

<dl> (definition list) elements should contain only properly structured <dt> (definition term) and <dd> (definition description) elements as direct children, optionally wrapped in <div> grouping elements. Including other elements directly inside a <dl> breaks the semantic structure of the list, making it difficult for screen readers and other assistive technologies to interpret the term-and-description relationships correctly.

Example

In the following example, the <dl> contains a <p> element as a direct child, which is invalid markup. Screen readers may misinterpret the list structure, breaking the definition-list rule.

In contrast, the following code snippet contains only valid <dt> and <dd> children inside the <dl>. Screen readers can correctly identify each term and its definition, and the code does not break the definition-list rule.

How to fix?

Check if your <dl> elements contain any direct children other than <dt>, <dd>, or <div> (used for grouping). If so, make the following changes:

• Move any non-<dt>/<dd> content — such as headings, paragraphs, or spans — outside the <dl> element.
• Ensure every <dl> contains at least one <dt> followed by one <dd>.
• If you need to group term-description pairs, wrap them in a <div> inside the <dl>.

Reference

• WCAG 1.3.1: Info and Relationships
• HTML: The dl element