Skip to main content

Definition Lists

A definition list is a way to organize content by connecting a term to its explanation. Think of a dictionary: each word is followed by its meaning. Definition lists work the same way. When used correctly, they create a clear structure that helps everyone, especially people who use assistive technology like screen readers.

Problems with Definition Lists

The biggest issue with definition lists is that no screen reader (as of 2026) fully supports them. While items are read as list items, there is no indication difference between the term and the description.

So while definition lists have great promise, their support is limited.

The Parts of a Definition List

In HTML, a definition list is made of three elements:

  • <dl> -- the list container (holds everything together)
  • <dt> -- the term being defined
  • <dd> -- the description or meaning of the term

Here is a simple example:

<dl>
  <dt>Screen reader</dt>
  <dd>Software that reads text aloud for people who are blind or have low vision.</dd>

  <dt>Contrast</dt>
  <dd>The difference in brightness between text and its background.</dd>
</dl>

When to Use a Definition List

Definition lists are the right choice when there is a clear pairing between a label and its meaning. Good examples include:

  • Glossaries: word and its definition
  • FAQs: question and its answer
  • Specifications: feature name and value
  • Metadata: label like “Author” and the matching detail

If your content is a series of steps, use an ordered list (<ol>). If it’s a group of similar items, use an unordered list (<ul>). If it’s rows and columns of data, use a table. Choosing the correct structure is an important part of accessibility.

Quick Accessibility Checklist

  • Use <dl> only when there is a true term-and-definition relationship.
  • Place terms in <dt> and explanations in <dd>.
  • Keep wording short and clear.
  • Do not use styling alone to show meaning.
  • Test your content with a keyboard and, if possible, a screen reader.

Summary

Definition lists are a helpful and accessible way to pair terms with their meanings. When you use <dl>, <dt>, and <dd> correctly, you create a clear structure that supports WCAG standards and makes your content easier to understand for everyone.

Last modified