Ensure <dl> elements are structured correctly

Definition lists (<dl>) should be correctly structured to ensure accessibility and proper semantic meaning.

About This Rule

This rule ensures that <dl> elements are structured correctly, containing only properly ordered <dt> and <dd> groups, optionally wrapped in <div>, <script>, or <template> elements. Adhering to this structure is essential for semantic accuracy and accessibility.

Why It Matters

Screen readers interpret definition lists in a specific way. Improperly structured lists can lead to confusion or inaccurate output for users relying on assistive technologies. Ensuring correct markup enhances the user experience and maintains semantic integrity.

How to Fix

Ensure that your definition lists adhere to the following structure:

• <dl> elements should contain only <dt> (definition term) and <dd> (definition description) elements, optionally wrapped in <div>, <script>, or <template> elements.
• Each <dt> should be immediately followed by one or more corresponding <dd> elements.
• Avoid placing non-permissible elements directly within a <dl>.

Example

Correct Structure

<dl>
  <dt>Coffee</dt>
  <dd>A brewed beverage prepared from roasted coffee beans.</dd>
  <div>
    <dt>Milk</dt>
    <dd>A white liquid produced by the mammary glands of mammals.</dd>
  </div>
</dl>

Incorrect Structure

<dl>
  <p>This is a paragraph inside a dl, which is incorrect.</p>
  <dt>Tea</dt>
  <dd>An aromatic beverage commonly prepared by pouring hot water over cured leaves.</dd>
</dl>