HTML <dl> Tag – Description List
📌 Introduction
The <dl> tag is used to create a description list in HTML.
A description list is used to define:
- Terms
- Descriptions
- Key-value style information
It is commonly used in:
- Glossaries
- Dictionaries
- FAQ sections
- Metadata lists
🧱 Structure
A description list uses 3 tags:
<dl>→ container<dt>→ term (definition title)<dd>→ description
💡 Syntax
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>DL Example</title>
</head>
<body>
<h2>Web Terms</h2>
<dl>
<dt>HTML</dt>
<dd>Structure of web pages</dd>
<dt>CSS</dt>
<dd>Used to style web pages</dd>
<dt>JavaScript</dt>
<dd>Adds interactivity to websites</dd>
</dl>
</body>
</html>
🖥️ Output Explanation
- Each
<dt>shows a term - Each
<dd>shows its description - Terms and descriptions are grouped visually
🎯 When to Use <dl>
Use it for:
- Glossaries
- Definitions
- FAQ sections
- Key-value data
Example:
<dl>
<dt>CPU</dt>
<dd>Central Processing Unit</dd>
</dl>
🧠 Important Concept
👉 <dl> is NOT a normal list
It is for paired information:
- Term → Description
- Name → Value
⚖️ <dl> vs <ul>
| Tag | Purpose |
|---|---|
<dl> |
Definitions (term + description) |
<ul> |
Bullet list items |
🚫 Common Mistakes
- Using
<dl>like a normal list ❌ - Missing
<dt>or<dd>❌ - Mixing it with
<li>❌
🎨 Styling Example
<dl style="background:#f5f5f5; padding:10px;">
<dt><b>HTML</b></dt>
<dd>Structure of web pages</dd>
</dl>
🧪 Mini Exercise
Create a page with:
- A glossary of 5 web terms
- Each term using
<dt> - Each description using
<dd> - Style the list with padding and background color