HTML Dl Tag - HTML Description List

Q: Q3. What is the syntax of the HTML dl tag?

Ans: The HTML dl tag is represented using the <dl tag. It also encloses two major element tags i,e. <dt and <dd tags.

Q: Q4. How many terms can I use in HTML dl tags?

Ans: There are no limitation of terms and descriptions which you can keep inside your html dl tags.

With the help of the HTML dl tag, you can list items with their descriptions easily. Also known as Description lists, these tags are often used for metadata, glossaries, feature lists, FAQs, and more.

It’s a classification of the lists in HTML tags, which is used to create a list that pairs simple terms with their descriptions or definitions. Here, we are going to learn more about their usage in daily life and how to implement them on webpages.

The HTML dl Tag

The HTML dl tag, or Description List tag, in HTML is used to feature a tag that contains definitions or descriptions of a list of terms. This tag is represented by the <dl> tag syntax.

The HTML dl tag is used to describe or define certain terms we used in our list.
The HTML dl tag encloses terms and their descriptions as key-value pairs.
There are two major elements in the HTML dl tag, including <dt> and <dd> tags.
It is different from the common list format i,e, <li> tag, which we use to present simple terms without any descriptions.
The <dl> tag is supported on all major search browsers, including Chrome, Safari, Opera, Mozilla Firefox, Big, and more.
The <dl> tag supports both Global attributes and event attributes in HTML.

What HTML dl tags contain?

Check the two major elements inside the HTML dl tag below.

The <dt> tag: The list of term tags <dt> contains the terms that define the description in the list.
The <dd> tag: This tag is used to contain the description of the term in the list.

There are no limitations on the maximum number of <dt> and <dd> tags you can embed in your HTML page.

Syntax of HTML dl Tag

The HTML dl tag is presented using the opening and closing <dl> and </dl> tags. We have to enclose terms or their descriptions in their designated places inside the tags to ensure they work.

<dl> This is an example of a description list in HTML </dl>

There are two elements in the HTML dl tag that must be integrated in their proper place.

The <dl> tag is used as an opening and closing tag for the description list
The <dt> tag is used to enclose the terms for which we want descriptions.
The <dd> tag actually holds the description of the definition of the term.

Let us understand the following with a simple example given in the heading below.

Examples of HTML dl tags [With Code]

Let us build an HTML description list from scratch. In this example, we are going to list different courses with a short description for each course available on the PW Skills website.

<!– PW Skills – Course list using <dl> –>

<h2 id=”pw-courses”>PW Skills — Available Courses</h2>

<style>

.courses { max-width: 900px; margin: 0 auto; font-family: system-ui, -apple-system, “Segoe UI”, Roboto, “Helvetica Neue”, Arial; }

dl { border-radius: 10px; padding: 0; margin: 1rem 0; background: #fafafa; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

dt { padding: 1rem; border-bottom: 1px solid #eee; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }

dd { margin: 0; padding: 0 1rem 1rem 1rem; color: #333; line-height: 1.5; }

.meta { font-size: 0.85rem; color: #666; font-weight: 600; }

.badge { background:#eef6ff; border:1px solid #d8eefe; padding: 0.15rem 0.5rem; border-radius: 999px; font-size:0.8rem; }

.course-description { margin-top: 0.45rem; font-size: 0.95rem; }

</style>

<dl>

<dt>

<span>Full Stack Web Development</span>

<span class=”badge”>Beginner → Advanced</span>

</dt>

<dd>

<div class=”meta”>Duration: 6–9 months • Mode: Project-based</div>

Learn HTML, CSS, JavaScript, React, Node.js, Express and databases by building real-world projects and deploying full-stack apps.

</div>

</dd>

<dt>

<span>Data Science & Machine Learning</span>

<span class=”badge”>Intermediate</span>

</dt>

<dd>

<div class=”meta”>Duration: 4–6 months • Mode: Hands-on</div>

Python for data science, statistics, feature engineering, supervised & unsupervised learning, model deployment and real datasets.

</div>

</dd>

<dt>

<span>Data Analytics (Python + SQL)</span>

<span class=”badge”>Beginner</span>

</dt>

<dd>

<div class=”meta”>Duration: 2–3 months • Mode: Practical labs</div>

Excel → SQL → Python pipeline for cleaning, analyzing and visualizing data. Includes dashboards and case studies for business insights.

</div>

</dd>

<dt>

<span>Python Programming</span>

<span class=”badge”>Beginner</span>

</dt>

<dd>

<div class=”meta”>Duration: 1.5–3 months • Mode: Project-based</div>

Core Python fundamentals, data structures, OOP, file I/O and small projects to prepare you for automation, web or data roles.

</div>

</dd>

<dt>

<span>Machine Learning & Deep Learning</span>

<span class=”badge”>Advanced</span>

</dt>

<dd>

<div class=”meta”>Duration: 3–5 months • Mode: Research-oriented</div>

In-depth model architectures, neural networks, CNNs/RNNs/Transformers, experimentation, optimization and model serving.

</div>

</dd>

<dt>

<span>DevOps & Cloud Engineering</span>

<span class=”badge”>Intermediate</span>

</dt>

<dd>

<div class=”meta”>Duration: 2–4 months • Mode: Lab-heavy</div>

CI/CD, Docker, Kubernetes, Terraform, monitoring and deploying scalable applications on cloud providers.

</div>

</dd>

<dt>

<span>Digital Marketing</span>

<span class=”badge”>Beginner</span>

</dt>

<dd>

<div class=”meta”>Duration: 1–2 months • Mode: Case studies</div>

SEO, content marketing, social ads, analytics and growth tactics to drive traffic and conversions for real campaigns.

</div>

</dd>

<dt>

<span>Paid Ads & Performance Marketing</span>

<span class=”badge”>Intermediate</span>

</dt>

<dd>

<div class=”meta”>Duration: 1–2 months • Mode: Campaign work</div>

Google Ads, Facebook Ads, bidding strategies, conversion tracking and optimizing ROAS with A/B testing.

</div>

</dd>

</dl>

</div>

</section>

This is a complete representation of an HTML page along with a little bit of styling using CSS. First, let us check the output and then the important sections containing the HTML dl tag in the code.

Output

Let us check the important section containing the HTML dl tag to better understand how we can embed the HTML dl tag in our content.

<dl>

<dt>

<span>Full Stack Web Development</span>

<span class=”badge”>Beginner → Advanced</span>

</dt>

<dd>

<div class=”meta”>Duration: 6–9 months • Mode: Project-based</div>

Learn HTML, CSS, JavaScript, React, Node.js, Express and databases by building real-world projects and deploying full-stack apps.

</div>

</dd>

<dt>

<span>Data Science & Machine Learning</span>

<span class=”badge”>Intermediate</span>

</dt>

<dd>

<div class=”meta”>Duration: 4–6 months • Mode: Hands-on</div>

Python for data science, statistics, feature engineering, supervised & unsupervised learning, model deployment and real datasets.

</div>

</dd>

</dl>

Output

Check this section here, we are mentioning only two courses in the description list along with the styling. You can notice the flow of the complete description list tag below.

The <dl> tag encloses each pointer in the list as a wrapper. You can notice an opening <dl> tag at the start and a closing </dl> tag at the end.
In between you can notice the course name enclosed within the <dt> tag i,e. Full stack web development, data science & Machine learning, DevOps & Cloud engineering, Python programming, and more.
Now, for the actual short description about each course, you can see the descriptions enclosed within the <dd> tag of each item in the list.

Different Formats of HTML Dl Tag

You can easily use different formats of the description list tag. Let us check how we can use HTML dl tags in different formats below.

1. Single Term & Description

Here, we are using a single <dt> tag for the term and a single <dd> tag for the description of the term.

<dl>

<dd>HyperText Markup Language</dd>

</dl>

Output

HTML dl tag

2. Multiple Terms & Single Description

Here, we are using multiple <dt> tags for each term used and a single <dd> tag for the description of the term.

<dl>

<dd>Core technologies for building web pages</dd>

</dl>

Output

HTML dl tag

3. Single Term & Multiple Descriptions

Here, we are using a single <dt> tag and multiple <dd> tags for the description of the term.

<dl>

<dt>JavaScriptwa</dt>

<dd>Used for interactivity</dd>

<dd>Supports both frontend and backend</dd>

</dl>

Output

HTML dl tag

4. Multiple Terms & Descriptions

Here, we are using multiple <dt> tags and multiple <dd> tags for the description of the terms.

<dl>

<dt>Frontend</dt>

<dd>HTML, CSS, JavaScript</dd>

<dt>Backend</dt>

<dd>Node.js, Python, Databases</dd>

</dl>

Output

HTML dl tag

How to use the HTML DL tag?

You can easily use HTML dl tags for your web development project or simply to list terms along with their descriptions.

The <dl> tag is used to enclose the entire list inside a block or say wrapper.
The <dt> tag holds the terms for which you need to add a description of the list.
The <dd> tag is used to define terms or add important descriptions to the list.

Check this example below, the <dl> tag encloses the entire list containing terms like Frontend and Backend. The <dt> tags hold the term or name of the subject i,e. Frontend and backend. The <dd> tags hold the description of the elements inside each of these term.

<dl>

<dt>Frontend</dt>

<dd>HTML, CSS, JavaScript</dd>

<dt>Backend</dt>

<dd>Node.js, Python, Databases</dd>

</dl>

Common Use Cases of HTML dl Tags

HTML dl tags can easily be used wherever you need terms along with their descriptions. Let us check some major uses of the description tag in HTML.

Glossaries: Description lists can be really helpful for listing terms and their definitions in glossaries and dictionaries.
FAQs (Frequently Asked Questions): Each question in the FAQ can be presented within the <dt> tag, while answers can be added in <dd> tags.
Product Specifications: It shows the product features with their details i,e. weight, color, price, and more.
Metadata: It can be used to display data as key-value pairs, like author name, date, version, etc.
Course Lists: It can help you represent course names with short descriptions.
Resume: You can list multiple points based on personal info like Name, Email, and Skills.
API Documentation: It can be used to define parameters, methods, and their explanations.

HTML dl Tags FAQs

Q1. What is the HTML dl tag?

Ans: The HTML dl tag is a description list that contains terms along with their description or definitions.

Q2. How to write a description list in HTML?

Ans: The HTML description list encloses single terms or groups of terms along with their single or multiple descriptions in the <dt and <dd tags.

Q3. What is the syntax of the HTML dl tag?

Ans: The HTML dl tag is represented using the <dl tag. It also encloses two major element tags i,e. <dt and <dd tags.

Q4. How many terms can I use in HTML dl tags?

Ans: There are no limitation of terms and descriptions which you can keep inside your html dl tags.

The HTML dl Tag

What HTML dl tags contain?

Syntax of HTML dl Tag

Examples of HTML dl tags [With Code]

Output

Output

Different Formats of HTML Dl Tag

1. Single Term & Description

Output

2. Multiple Terms & Single Description

Output

3. Single Term & Multiple Descriptions

Output

4. Multiple Terms & Descriptions

Output

How to use the HTML DL tag?

Common Use Cases of HTML dl Tags

HTML dl Tags FAQs

Q1. What is the HTML dl tag?

Q2. How to write a description list in HTML?

Q3. What is the syntax of the HTML dl tag?

Q4. How many terms can I use in HTML dl tags?

Must Read

Related Articles