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.

Semantic Meaning

A definition term conveys that:

  • The content is a label, key, or term being defined
  • It is associated with one or more descriptions (<dd>)
  • It represents the "name" part of a name-value pair
  • Multiple terms can share the same description

Screen readers announce the relationship between terms and their descriptions, helping users understand the data structure.

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
  • Any term requiring an associated description

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

Browser
A software application for accessing information on the World Wide Web.
Server
A computer or program that provides services to other computers or programs.
<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.

API
Application Programming Interface
A set of protocols and tools for building software applications, specifying how software components should interact.
DOM
Document Object Model
A programming interface for web documents that represents the page as a tree of objects.
<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.

Cache
A hardware or software component that stores data for faster future access.
A collection of items hidden away in a secret place.
In web development, temporary storage of web documents to reduce bandwidth and loading times.
<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 links, abbreviations, or code.

console.log()
Outputs a message to the browser's developer console.
HTTP
The foundation of data communication for the World Wide Web.
Progressive Enhancement
A strategy for web design that emphasizes core content first.
<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>

As Metadata Labels

Definition terms work well as labels in metadata or key-value displays.

Project Name
Vanilla Breeze
Version
1.0.0
License
MIT
Repository
github.com/example/vanilla-breeze

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
  • Use meaningful, descriptive text
  • Ensure every <dt> has at least one associated <dd>
  • Maintain logical grouping of terms and descriptions
  • Consider using <dfn> inside <dt> for the defining instance of a term

Using dfn Element

For the defining instance of a term, wrap it in <dfn>.

Semantic HTML
HTML that introduces meaning to the web page rather than just presentation.
<dl> <dt><dfn>Semantic HTML</dfn></dt> <dd>HTML that introduces meaning to the web page rather than just presentation.</dd> </dl>

CSS Properties

Property Value Description
font-weight 600 Semi-bold to distinguish terms from descriptions

When a <dt> follows a <dd> (i.e., starting a new term group), additional top margin is applied via the dd + dt selector with margin-block-start: var(--size-m).

Content Model

Permitted Content

  • Flow content, but no <header>, <footer>, sectioning, or heading elements
  • Inline elements: <a>, <abbr>, <code>, <dfn>, <em>, <strong>, etc.
  • Text content

Required Parent

Must be a child of <dl>, optionally wrapped in a <div>.

Required Siblings

Must be followed by one or more <dd> elements (or preceded by <dt> elements that share the same <dd>).

Related Elements

  • <dl> - Definition list container (required parent)
  • <dd> - Definition description (required sibling)
  • <dl-item> - Custom element for grouping dt/dd pairs
  • <dfn> - Defining instance of a term (can be used inside <dt>)

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