The <dt> Element
As defined in the HTML Living Standard, the <dt> (Description Term) element provides the term, or name, part of a term-description group in a description list (<dl>).
- WCAG
- Web Content Accessibility Guidelines
- WAI-ARIA
- Web Accessibility Initiative — Accessible Rich Internet Applications
<dl>
<dt>The Term</dt>
<dd>The description.</dd>
</dl>
View HTML Living Standard: The dt element
Constraint: Content Model
The <dt> element is strictly limited in what it can contain. It may only contain phrasing content (such as text, links, or images).
- No Headers: You cannot place
<h1>-<h6>tags inside a<dt>. - No Sections: You cannot place
<section>or<article>tags inside. - Naming: It represents the "label" for the following
<dd>content.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The <dt> element is the programmatic anchor for the description list. Assistive technologies use the text within the <dt> to identify the "name" in a name-value pair. When a screen reader user navigates a list, the browser announces the term first, providing the necessary context for the description that follows.
Advanced Grouping
You can associate multiple <dt> elements with a single <dd> (for synonyms) or multiple <dd> elements with a single <dt> (for multiple definitions).
<dl>
<dt>A11y</dt>
<dt>Accessibility</dt>
<dd>The practice of making websites usable by everyone.</dd>
</dl>
A11y Tip: Logical Structure
Ensure that the term in the <dt> is concise. If the "term" requires multiple paragraphs or complex structures, a description list might not be the most accessible choice; consider using headings and sections instead.