<dt>
Defines a term/name in a description list
Quick Answer
What is the HTML <dt> tag?
The <dt> tag defines a term/name in a description list (<dl>). It pairs with <dd> elements that provide the corresponding definitions or descriptions. Multiple <dt> and <dd> elements can be combined in flexible patterns. This semantic structure is ideal for glossaries, metadata lists, and FAQs.
Definition and Usage
The <dt> element establishes a term or name in
a description list.
The <dt> tag is used inside
<dl> (description list) together with
<dd> (description definition).
The <dt> tag represents the term being
described, while the following <dd> tag(s)
provide the description or definition.
<dt> can be
followed by multiple <dd> elements, allowing
multiple definitions for the same term.
<dt> tag must be a
direct child of the <dl> element and should
come before its associated <dd> element(s).
Browser support and standards
Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.
Read the MDN element referenceAttributes
The <dt> tag supports the
Global Attributes in HTML.
The <dt> tag also supports the
Event Attributes in HTML.
Examples
Basic Term Usage
Define terms in a simple description list:
Example
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Programming language for web interactivity</dd>
</dl>Multiple Terms for One Definition
Multiple <dt> elements can share the same
description:
Example
<dl>
<dt>Frontend</dt>
<dt>Client-side</dt>
<dd>The part of a web application that runs in the user's browser</dd>
<dt>Backend</dt>
<dt>Server-side</dt>
<dd>The part of a web application that runs on the server</dd>
</dl>Styled Terms
Apply CSS styling to terms:
Example
<style>
dt {
font-size: 18px;
font-weight: 700;
color: #745af2;
margin-top: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #e0e0e0;
}
dd {
margin-left: 20px;
margin-top: 8px;
color: #555;
}
</style>
<dl>
<dt>Responsive Design</dt>
<dd>Design approach that makes web pages render well on different devices</dd>
<dt>Mobile-First</dt>
<dd>Design strategy that starts with mobile devices and scales up</dd>
</dl>Glossary with Terms
Create a technical glossary:
Example
<h2>Programming Glossary</h2>
<dl>
<dt>Variable</dt>
<dd>A named storage location in computer memory</dd>
<dt>Function</dt>
<dd>A reusable block of code that performs a specific task</dd>
<dt>Array</dt>
<dd>A data structure that stores multiple values in a single variable</dd>
<dt>Loop</dt>
<dd>A programming structure that repeats a block of code</dd>
</dl>Product Features
List product features with descriptions:
Example
<h3>Smartphone Features</h3>
<dl>
<dt>5G Connectivity</dt>
<dd>Ultra-fast mobile internet speeds up to 10 Gbps</dd>
<dt>Triple Camera System</dt>
<dd>12MP wide, 12MP ultra-wide, and 12MP telephoto lenses</dd>
<dt>Battery Life</dt>
<dd>All-day battery with up to 20 hours of video playback</dd>
<dt>Display</dt>
<dd>6.7-inch Super Retina XDR display with ProMotion</dd>
</dl>Metadata Presentation
Display document or file metadata:
Example
<h3>Document Information</h3>
<dl>
<dt>Author</dt>
<dd>Jane Smith</dd>
<dt>Published</dt>
<dd>October 1, 2024</dd>
<dt>Last Modified</dt>
<dd>October 15, 2024</dd>
<dt>Category</dt>
<dd>Web Development</dd>
<dt>Tags</dt>
<dd>HTML, CSS, JavaScript, Tutorial</dd>
</dl>DT and DD Relationship
Understanding how <dt> and
<dd> work together:
-
One-to-One: One
<dt>followed by one<dd> -
One-to-Many: One
<dt>followed by multiple<dd>elements (multiple definitions) -
Many-to-One: Multiple
<dt>elements followed by one<dd>(synonyms) - Mixed: Any combination of the above patterns
<dt> element
must be inside a <dl> and should appear before
its associated <dd> element(s).
Styling Terms with CSS
Common techniques for styling description terms:
Bold and Colored Terms
Example
<style>
dt {
font-weight: 700;
color: #745af2;
font-size: 16px;
margin-bottom: 8px;
}
dd {
margin-left: 20px;
margin-bottom: 16px;
}
</style>Uppercase with Background
Example
<style>
dt {
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
letter-spacing: 1px;
background: #f0f0f0;
padding: 8px 12px;
border-radius: 4px;
display: inline-block;
margin-top: 16px;
}
</style>Icon Before Terms
Example
<style>
dt::before {
content: "▶ ";
color: #745af2;
font-weight: bold;
margin-right: 8px;
}
dt {
font-weight: 600;
margin-top: 12px;
}
</style>Horizontal Layout Terms
Example
<style>
dl {
display: grid;
grid-template-columns: 150px 1fr;
gap: 12px 24px;
}
dt {
font-weight: 700;
text-align: right;
color: #745af2;
}
dd {
margin: 0;
}
</style>Best Practices for Marking Up Terms
-
Always place
<dt>inside a<dl>element -
Each
<dt>should be followed by at least one<dd> - Keep term text concise and clear
-
Use multiple
<dt>elements for synonyms or related terms -
Don't nest block elements inside
<dt>- keep it simple - Use CSS for visual styling, not additional markup
- Maintain consistent styling across all terms in a list
- Consider accessibility when applying styles (ensure sufficient contrast)
- Use semantic HTML - don't use spans or divs to fake term styling
Try it Yourself
Interactive Example
Here's a live example of styled description terms:
- HTML
- HyperText Markup Language - structures web content
- CSS
- Cascading Style Sheets - styles and layouts web pages
- JavaScript
- Programming language for web interactivity
Default CSS Settings
Most browsers will display the <dt> element
with the following default values:
Default CSS
Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
dt {
display: block;
}