HTML <dd> Tag – Definition Description
📌 Introduction
The <dd> tag is used to define the description or explanation of a term inside a description list (<dl>).
It works together with:
<dt>→ the term (title)<dd>→ the description (meaning)
🧱 Syntax
<dl>
<dt>HTML</dt>
<dd>Used to structure web pages</dd>
</dl>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>DD Example</title>
</head>
<body>
<h2>Programming Terms</h2>
<dl>
<dt>HTML</dt>
<dd>Creates the structure of a webpage</dd>
<dt>CSS</dt>
<dd>Styles and designs the webpage</dd>
<dt>JavaScript</dt>
<dd>Adds interactivity and logic</dd>
</dl>
</body>
</html>
🖥️ Output Explanation
<dt>shows the term<dd>shows the explanation- Together they form a structured definition list
🎯 When to Use <dd>
Use <dd> for:
- Definitions
- Explanations
- Key-value details
- FAQ answers
Example:
<dl>
<dt>API</dt>
<dd>A way for programs to communicate with each other</dd>
</dl>
🧠 Important Rule
👉 <dd> must always be inside <dl>
✔ Correct:
<dl>
<dt>CPU</dt>
<dd>Central Processing Unit</dd>
</dl>
❌ Wrong:
<dd>Some description</dd>
⚖️ <dt> vs <dd>
| Tag | Meaning |
|---|---|
<dt> |
Term / title |
<dd> |
Description / explanation |
🎨 Styling Example
<dl>
<dt>HTML</dt>
<dd style="color:gray;">Structure of web pages</dd>
</dl>
🚫 Common Mistakes
- Using
<dd>outside<dl>❌ - Forgetting matching
<dt>❌ - Using it like
<li>❌
🧪 Mini Exercise
Create a glossary page with:
- 5 terms using
<dt> - Descriptions using
<dd> - Style descriptions in a lighter color
- Add spacing between items