tag dl

The dl tag defines a description list (also called a definition list), which is used to group terms and their descriptions.

It pairs with:

• <dt> (Definition Term) — the item/word being defined
• <dd> (Definition Description) — the explanation or value for that term

---

✅ Basic Syntax

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

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

📍 Result:

• “HTML” and “CSS” are terms
• Their meanings appear indented below each term

---

🎯 Use Cases

• Glossaries
• FAQs (Question as <dt>, Answer as <dd>)
• Product feature lists
• Metadata or key-value pairs

---

🧩 Example: FAQ Section

<dl>
  <dt>What is HTML?</dt>
  <dd>HTML stands for HyperText Markup Language.</dd>

  <dt>What is CSS?</dt>
  <dd>CSS stands for Cascading Style Sheets and controls the design of web pages.</dd>
</dl>

---

🎨 Styling Example

<style>
  dl {
    font-family: Arial, sans-serif;
    margin-bottom: 20px;
  }

  dt {
    font-weight: bold;
    margin-top: 10px;
  }

  dd {
    margin-left: 20px;
    color: #555;
  }
</style>

---

✅ Summary

Tag	Purpose
<dl>	Description/definition list
<dt>	Definition term (the word/concept)
<dd>	Description/detail of the term

---

🧠 Tips

• You can have multiple <dd> elements for a single <dt>.
• You can also nest other elements (like paragraphs, links, or even lists) inside <dd> for more complex descriptions.

---