What are description lists?

Question

What are description lists and when should I use them?

Answer

Description lists are used to associate terms with their relevant descriptions. This is done by utilizing the description list element (<dl>) to contain all of the description term elements (<dt>) that are each followed by the related description elements (<dd>).

When should I use them?

This type of list should only be used when associating terms or words with their given description or definition. A common example of when these are properly used is when definitions of the terms used on a page are given in their own section. Although, it can be used in other ways, such as in the second example within the "Examples" portion later on in this post.

Description lists should not be used for styling purposes only or in place of order lists (<ol> elements) or unordered lists (<ul> elements) if the content does not match the purpose. They should also not be used for styling or formatting content. The reason for this is to avoid miscommunication of meaning and information to users of assistive technology.

Examples:

  1. If the word/term is "Internet", this would be held within the <dt> element and the definition/description of "A global computer network providing a variety of information and communication facilities, consisting of interconnected networks using standardized communication protocols," would be held within the <dd> element, which should follow the previously mentioned <dt> element. Both of these elements would be held as children of the <dl> element.
  2. Another use case would be as an alternative way to organize information. Such as the term "Name" (held within the <dt> element) and the description of "John Smith" (held within the <dd> element) while ensuring both are held as children of the <dl> element.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.