Ensure <dt> and <dd> elements are contained by a <dl>

In HTML, definition terms (<dt>) and their corresponding descriptions (<dd>) should be properly nested within a definition list (<dl>) to maintain semantic structure and ensure accessibility.

About This Rule

This rule ensures that all <dt> and <dd> elements are children of a <dl> element, maintaining proper semantic structure and enhancing accessibility for users of assistive technologies.

Why It Matters

Screen readers and other assistive technologies rely on correct HTML semantics to convey information accurately. When <dt> and <dd> elements are not enclosed within a <dl>, it can lead to confusion, making it difficult for users to understand the relationship between terms and their definitions.

How to Fix

Ensure that all <dt> and <dd> elements are properly nested within a <dl> element:

• Wrap each set of <dt> and <dd> pairs inside a <dl> element.
• Ensure that each <dt> is immediately followed by its corresponding <dd>.
• Avoid placing <dt> or <dd> elements outside of a <dl>.

Example

Incorrect

Definition terms and descriptions outside of a <dl>:

<dt>Coffee</dt>
<dd>A brewed beverage prepared from roasted coffee beans.</dd>
<dt>Tea</dt>
<dd>An aromatic beverage commonly prepared by pouring hot water over cured leaves.</dd>

Correct

Properly nested <dt> and <dd> elements within a <dl>:

<dl>
  <dt>Coffee</dt>
  <dd>A brewed beverage prepared from roasted coffee beans.</dd>
  <dt>Tea</dt>
  <dd>An aromatic beverage commonly prepared by pouring hot water over cured leaves.</dd>
</dl>