HTML <dt> Tag – Definition Term
📌 Introduction
The <dt> tag is used to define a term (title) inside a description list (<dl>).
It is always paired with:
<dd>→ description of the term
Together they form a structured definition system.
🧱 Syntax
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>DT Example</title>
</head>
<body>
<h2>Web Technologies</h2>
<dl>
<dt>HTML</dt>
<dd>Used to structure web pages</dd>
<dt>CSS</dt>
<dd>Used to style web pages</dd>
<dt>JavaScript</dt>
<dd>Used to add interactivity</dd>
</dl>
</body>
</html>
🖥️ Output Explanation
- Each
<dt>shows the term (title) - Each
<dd>shows the meaning or description - They work together inside
<dl>
🎯 When to Use <dt>
Use <dt> for:
- Words in a glossary
- Titles in definitions
- Keys in key-value data
Example:
<dl>
<dt>API</dt>
<dd>Application Programming Interface</dd>
</dl>
🧠 Important Rule
👉 <dt> cannot be used alone
It must be inside <dl>:
✔ Correct:
<dl>
<dt>HTML</dt>
<dd>Markup language</dd>
</dl>
❌ Wrong:
<dt>HTML</dt>
⚖️ <dt> vs <dd>
| Tag | Meaning |
|---|---|
<dt> |
Term / title |
<dd> |
Description |
🎨 Styling Example
<dl>
<dt style="font-weight:bold;">HTML</dt>
<dd>Structure of web pages</dd>
</dl>
🚫 Common Mistakes
- Using
<dt>outside<dl>❌ - Forgetting
<dd>❌ - Using it like a normal list item ❌
🧪 Mini Exercise
Create a glossary page with:
- 5 terms using
<dt> - Their meanings using
<dd> - Style terms to be bold or colored