Definition and Usage

The <dt> tag represents the name in a group consisting of a name and a description of the name within a description list (represented using the <dl> tag).
'dt' is used as an abbreviation for 'Description Term'.

Here, the name specified using the <dt> tag refers to a term, definition, name, topic, or question, while the <dd> tag provides the description of that name.

The <dt> must only be used as content within the <dl> tag.

Examples by Purpose of Use

The following is an example demonstrating the use of the <dt> tag.
You can easily understand how the <dt> tag is used as a name for a specific purpose within a description list.

Used as the Name for Representing "Terms" or "Definitions"

HTML 
<p>This is a description of HTML and CSS.</p>
<dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
        An abbreviation for HyperText Markup Language,
        it is a markup language used to create web pages.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
        An abbreviation for Cascading Style Sheets,
        it is a stylesheet language used to define the style and layout of web pages.
    </dd>
</dl>

Note!
As shown in the example above, using the <dfn> tag together with the <dt> tag makes it possible to clearly indicate that it represents a term within content where a term and its definition are presented together.

Rendered Output

Used as the Name for Representing "Names"

HTML 
<p>These are the most popular movie protagonists.</p>
<dl>
    <dt>Harry Potter</dt>
    <dd>
        The protagonist of the "Harry Potter" series by J.K. Rowling,
        a boy who experiences adventures as a wizard.
    </dd>
    <dt>Luke Skywalker</dt>
    <dd>
        A character who plays a major role in the "Star Wars" series,
        a Jedi Knight with powerful abilities.
    </dd>
</dl>
Rendered Output

Used as the Name for Representing "Topics"

HTML 
<p>This describes a travel plan.</p>
<dl>
    <dt>Travel Purpose</dt>
    <dd>Rest, sightseeing, exploration, etc.</dd>
    <dt>Travel Duration</dt>
    <dd>Short trips (1–3 days), medium trips (4–7 days), long trips (8 days or more)</dd>
    <dt>Travel Budget</dt>
    <dd>Low budget, medium budget, high budget</dd>
</dl>
Rendered Output

Used as the Name for Representing "Questions"

HTML 
<p>These are frequently asked questions and answers.</p>
<dl>
    <dt>Q: How can I purchase the product?</dt>
    <dd>A: You can purchase the product through the online store or at an offline retail store.</dd>
    <dt>Q: How do I use the product?</dt>
    <dd>A: You can refer to the manual or check the manufacturer’s website for instructions on how to use the product.</dd>
    <dt>Q: What should I do if there is a problem with the product?</dt>
    <dd>A: If there is a problem with the product, please contact the manufacturer’s customer support or service center.</dd>
 </dl>
Rendered Output

Used as the Name for Combined Purposes

HTML 
<p>This is an introduction to our company.</p>
<dl>
    <dt>Company Name</dt>
    <dd>Our Company</dd>
    <dt>Founded</dt>
    <dd>July 30, 2012</dd>
    <dt>Business Area</dt>
    <dd>Creating socially beneficial value</dd>
    <dt>Phone Number</dt>
    <dd>(123) 456-7890</dd>
    <dt>Business Description</dt>
    <dd>A coding tutorial for everyone.</dd>
</dl>
Rendered Output

The following is an example demonstrating the syntax structure of the <dt> tag. You can easily understand how the <dt> tag is used as content of a specific structure within a description list.

Single Name and Single Description

HTML 
<p>These are the most popular movie protagonists.</p>
<dl>
    <dt>Harry Potter</dt>
    <dd>
        The protagonist of the "Harry Potter" series by J.K. Rowling,
        a boy who experiences adventures as a wizard.
    </dd>
    <dt>Luke Skywalker</dt>
    <dd>
        A character who plays a major role in the "Star Wars" series,
        a Jedi Knight with powerful abilities.
    </dd>
</dl>
Rendered Output

Multiple Names and Single Description

HTML 
<dl>
    <dt>United States</dt>
    <dt>United States of America</dt>
    <dd>A federal republic consisting of 50 states and 1 federal district.</dd>
</dl>
Rendered Output

Single Name and Multiple Descriptions

HTML 
<dl>
    <dt>Coffee</dt>
    <dd>A beverage made from the fruit of the coffee plant</dd>
    <dd>Nice! Iced Americano 😃</dd>
</dl>
Add Emojis to Your Web Pages
Rendered Output

Multiple Names and Multiple Descriptions

By combining the examples above, it is also possible to associate multiple names with multiple descriptions.

Wrapping with the <div> Tag for Styling

The specification states that it is a good practice to wrap a group consisting of a name (specified using the <dt> tag) and a description of the name (provided using the <dd> tag) with the <div> tag to assist with styling.

The <dt> tag must only be used as a child element of the <dl> tag, or as a child element of a <div> tag that is a direct child of the <dl> tag.

HTML 
<style>
    .dl-item {
        padding: 1em;
        border-radius: 1em;
        background-color: beige;
    }
    .dl-item + .dl-item {
        margin-top: 1em;
    }
    .dl-item dt {
        font-weight: 600;
        margin-bottom: 0.3em;
    }
    .dl-item dd {
        margin: 0;
    }
</style>
<dl>
    <div class="dl-item">
        <dt>Name</dt>
        <dd>John Doe</dd>
    </div>
    <div class="dl-item">
        <dt>Year of Birth</dt>
        <dd>2002</dd>
    </div>
    <div class="dl-item">
        <dt>Place of Birth</dt>
        <dd>Los Angeles, United States</dd>
    </div>
    <div class="dl-item">
        <dt>Favorite Color</dt>
        <dd>Blue</dd>
    </div>
</dl>
Rendered Output

Things to Keep in Mind

Review the elements that are not permitted as content within the <dt> tag.

Specific elements such as the <header>, <footer>, and Sectioning content, as well as content like headings, must not be included.
These elements are typically used to represent document sections or to organize the overall document structure.

Technical Summary

Technical Summary of the dt tag
Permitted parents A <dl> or a <div> that is a child of a <dl>.
Permitted content Flow content.
However, even though they are flow content, the following elements cannot be used as content:
Implicit ARIA role No corresponding role
Permitted ARIA roles listitem

Browser Compatibility

Browser compatibility for the dt tag
Tag
Desktop Chrome
Chrome
Desktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<dt> 1 12 1 4

Specifications

Specification for the dt tag
Specification
<dt> HTML Standard
#the-dt-element

References

See Also