dt
The definition term element represents the term, name, or key in a term-description group within a definition list.
Description
The <dt> element (definition term) specifies the term, name, or key in a <dl> (definition list). It must be followed by one or more <dd> elements that describe or define the term.
By default, <dt> elements are styled with bold font weight to visually distinguish them from their descriptions.
When to Use
- Glossary terms being defined
- Property names in metadata displays
- Question text in FAQ sections
- Label in key-value pairs
- Product attribute names
When Not to Use
- Outside of a
<dl>element - For regular list items — use
<li> - For standalone bold text — use
<strong>or<b> - For headings — use
<h1>–<h6>
Basic Usage
<dl> <dt>Browser</dt> <dd>A software application for accessing information on the World Wide Web.</dd> <dt>Server</dt> <dd>A computer or program that provides services to other computers.</dd></dl>Multiple Terms
Multiple <dt> elements can share a single <dd> description. This is useful for synonyms, abbreviations, or alternate names.
<dl> <dt>API</dt> <dt>Application Programming Interface</dt> <dd>A set of protocols and tools for building software applications.</dd> <dt>DOM</dt> <dt>Document Object Model</dt> <dd>A programming interface for web documents.</dd></dl>Term with Multiple Descriptions
A single <dt> can be followed by multiple <dd> elements for terms with multiple meanings.
<dl> <dt>Cache</dt> <dd>A hardware or software component that stores data for faster future access.</dd> <dd>A collection of items hidden away in a secret place.</dd> <dd>In web development, temporary storage of web documents.</dd></dl>Rich Content in Terms
Definition terms can contain inline elements like <code>, <abbr>, <dfn>, or links.
<dl> <dt><code>console.log()</code></dt> <dd>Outputs a message to the browser's developer console.</dd> <dt><abbr title="HyperText Transfer Protocol">HTTP</abbr></dt> <dd>The foundation of data communication for the World Wide Web.</dd></dl>Using dfn Element
For the defining instance of a term, wrap it in <dfn>:
<dl> <dt><dfn>Semantic HTML</dfn></dt> <dd>HTML that introduces meaning to the web page rather than just presentation.</dd></dl>Accessibility
Screen Reader Behavior
- Announced as a term or label within the definition list context
- Associated with following
<dd>elements - Users can navigate between term-description pairs
- The bold styling helps sighted users identify terms
Best Practices
- Keep terms concise and clear
- Ensure every
<dt>has at least one associated<dd> - Consider using
<dfn>inside<dt>for the defining instance of a term
CSS Properties
| Property | Value | Description |
|---|---|---|
font-weight |
600 |
Semi-bold to distinguish terms from descriptions |
When a <dt> follows a <dd> (starting a new term group), dd + dt adds margin-block-start: var(--size-m) for visual separation.
Content Model
Permitted Content
- Flow content, but no
<header>,<footer>, sectioning, or heading elements - Inline elements:
<a>,<abbr>,<code>,<dfn>,<em>,<strong>
Required Parent
Must be a child of <dl>, optionally inside a <dl-item>.
Related
Patterns Using This Element
The <dt> element is used in these patterns:
Key-Value / Description List
Display key-value pairs in horizontal or stacked layouts