Ensure dl elements are structured correctly

When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output. Lighthouse reports when <dl> elements do not contain properly-ordered <dt> and <dd> groups, <script>, or <template> elements:

Lighthouse audit showing definition lists do not contain properly ordered <dt> and <dd> groups, <script>, or <template> elements
Defintion lists do not contain properly ordered <dt> and <dd> groups, <script>, or <template> elements.

How to fix this problem

To fix this problem, structure your defintion list elements correctly. Screen readers have a specific way of announcing definition lists. When definition lists are not properly marked up, this creates the opportunity for confusing or inaccurate screen reader output.

Definition list items require dl elements around the list, dt elements for each term, and dd elements for each definition. Each set of dt elements must be followed by one or more dd elements. For example:

<dl>
<dt>Trail shoe</dt>
<dd>Extra grip for uneven, natural survaces, such as forest trails.</dd>
<dt>Road shoe</dt>
<dd>Extra cushioning for hard surfaces, such as sidewalks and roads.</dd>
</dl>

Learn more in <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, or <template> elements.

More information

Last updated: Improve article