Definition and Usage

The <dl> tag represents a description list.
This tag is an associated list of groups consisting of a name (specified using the <dt> tag) and a description of the name (provided using the <dd> tag).

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.

Examples by Purpose of Use

The following are examples demonstrating the purposes of use for the <dl> tag.
These examples will help you easily understand how to use the <dl> tag to create description lists for various purposes.

Used as a List for Explaining "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 a List for Explaining "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 a List for Explaining "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 a List for Explaining "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 a List for Combined Descriptions

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

Examples by Syntax Structure

The following is an example demonstrating the syntax structure of the <dl> tag. You can easily understand how the <dl> tag is used in terms of its structure.

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.

Furthermore, the specification clearly defines the elements that can be used as content of the <dl> tag.

Elements That Can Be Used as Content of the <dl> Tag

  • Zero or more groups consisting of one or more <dt> tags and one or more <dd> tags
    (Optionally mixed with <script> tags and <template> tags)
  • Or, one or more <div> tags
    (Optionally mixed with <script> tags and <template> tags)
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

The <dl> tag is not suitable for interactive markup.

To assist with your understanding, here is an example of marking up a quiz using the <dl> tag.

HTML 
<dl class="quiz">
    <dt>Which is the longest river in the world?</dt>
    <dd>
        <input type="radio" id="q1_choice1" name="q1" value="1">
        <label for="q1_choice1">Amazon River</label>
    </dd>
    <dd>
        <input type="radio" id="q1_choice2" name="q1" value="2">
        <label for="q1_choice2">Nile River</label>
    </dd>
    <dd>
        <input type="radio" id="q1_choice3" name="q1" value="3">
        <label for="q1_choice3">Yangtze River</label>
    </dd>
</dl>

One effective way to mark up interactive content such as a quiz is to group each question and its choices using appropriate elements. Since a quiz is typically structured in a question-and-answer format, it can be marked up accordingly. The following is an example that presents an alternative approach to marking up an interactive quiz using the <fieldset> and <legend> tags.

HTML 
<form>
    <fieldset>
        <legend>Which is the longest river in the world?</legend>
        <p>
            <input type="radio" id="q1_choice1" name="q1" value="1">
            <label for="q1_choice1">Amazon River</label>
        </p>
        <p>
            <input type="radio" id="q1_choice2" name="q1" value="2">
            <label for="q1_choice2">Nile River</label>
        </p>
        <p>
            <input type="radio" id="q1_choice3" name="q1" value="3">
            <label for="q1_choice3">Yangtze River</label>
        </p>
    </fieldset>
</form>

The use of the <dl> tag for navigation is generally not recommended.

As shown in the example below, using the <dl> tag for navigation is a discouraged practice. However, due to the flexibility of HTML, it may still be used in such a non-recommended manner.

HTML 
<dl>
    <dt>Menu</dt>
    <dd><a href="">About Us</a></dd>
    <dd><a href="">Products</a></dd>
    <dd><a href="">Contact</a></dd>
</dl>

In the above example, the <dl> tag is used to represent a navigation menu. However, this is semantically inappropriate and may cause potential confusion. In general, a navigation menu should be marked up using a list (<ul>) element.

HTML 
<nav>
    <ul>
        <li><a href="">About Us</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

In the above code, the <nav> tag is used to wrap the navigation menu, and each menu item is listed using the <ul> and <li> tags. The updated code now represents a navigation menu expressed as a list, providing more semantic and structurally appropriate markup.

Technical Summary

Technical Summary of the dl tag
Permitted parents Any element that accepts flow content.
Permitted content
  • Zero or more groups consisting of one or more <dt> tags and one or more <dd> tags (Optionally mixed with <script> tags and <template> tags)
  • Or, one or more <div> tags (Optionally mixed with <script> tags and <template> tags)
Implicit ARIA role No corresponding role
Permitted ARIA roles group, list, none, presentation

Browser Compatibility

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

Specifications

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

References

See Also