Learn HTML – Part 20 – dl, dt, dd Tags – Description Lists

The HTML Description List is created using the dl, dt, and dd tags. It is used to display terms and their descriptions.

Unlike unordered (ul) and ordered (ol) lists, description lists are used for definitions, glossaries, FAQs, and key-value pairs.

What is a Description List?

A description list is used to group related terms and their explanations.

• dl – Description List (container)
• dt – Description Term
• dd – Description Definition

Basic Syntax

<dl>
   <dt>Term 1</dt>
   <dd>Definition of Term 1</dd>

   <dt>Term 2</dt>
   <dd>Definition of Term 2</dd>
</dl>

Example – Simple Description List

<dl>
   <dt>HTML</dt>
   <dd>HyperText Markup Language</dd>

   <dt>CSS</dt>
   <dd>Cascading Style Sheets</dd>

   <dt>JS</dt>
   <dd>JavaScript Programming Language</dd>
</dl>

Output:

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

JS

JavaScript Programming Language

Where Description Lists Are Used

• Glossary sections
• FAQ layouts
• Product specifications
• Metadata display (Label → Value)
• Documentation pages

Description lists are perfect for structured data where each item has a label and explanation.

ul vs ol vs dl – Quick Comparison

Important Notes

• A dl can contain multiple dt and dd pairs.
• You can have multiple dd elements for a single dt.
• The order matters: dt should come before dd.

Conclusion

The HTML description list uses dl, dt, and dd tags to display terms and their explanations.

It is different from ordered and unordered lists and is mainly used for definitions and structured information.

What’s Next?

Now that you understand description lists, the next step is learning about the div tag, which is used as a generic container element to group content in HTML.

Next: Learn HTML – Part 21 – div Tag – Generic Container Element →

Series: Learn HTML Series