📋 Phase 4 · Lists🟢 BeginnerMODULE 12
Description Lists
Course progress34%
🎯 What you'll learn: The third list type nobody remembers —
<dl>, <dt>, <dd> — built for term/definition pairs: glossaries, FAQs, and metadata.
Section 1
A List That Isn't Ordered or Unordered
Description lists pair a term with its description — not a sequence, not a set of bullets, but key-value pairs. <dl> wraps the whole list, <dt> marks each term, <dd> marks its definition.
dl-basic.html
HTML
<dl> <dt>HTML</dt> <dd>HyperText Markup Language — the structure of web pages.</dd> <dt>CSS</dt> <dd>Cascading Style Sheets — the visual styling of web pages.</dd> </dl>
- HTML
- HyperText Markup Language — the structure of web pages.
- CSS
- Cascading Style Sheets — the visual styling of web pages.
Section 2
One Term, Multiple Definitions
A single <dt> can be followed by more than one <dd> — useful when a term has multiple meanings, synonyms, or related notes.
dl-multi.html
HTML
<dl> <dt>API</dt> <dd>Application Programming Interface.</dd> <dd>A contract that lets two pieces of software talk to each other.</dd> </dl>
💡
Multiple terms, one definition
The reverse also works: two <dt> elements in a row sharing one <dd> — handy for synonyms like <dt>Frontend</dt><dt>Client-side</dt><dd>The part of an app that runs in the browser.</dd>
Section 3
Real-World Use: FAQs
Description lists are the semantically correct choice for FAQ pages — each question is a term, each answer is its description. This is more accurate than using headings or plain paragraphs for Q&A content.
dl-faq.html
HTML
<dl> <dt>Do I need to know CSS before HTML?</dt> <dd>No — HTML comes first. It defines structure; CSS adds style afterward.</dd> <dt>Is HTML a programming language?</dt> <dd>No — it's a markup language. It describes content, not logic or behavior.</dd> </dl>
Section 4
Real-World Use: Metadata Panels
Product specs, author info, and key-value metadata are another natural fit — much better semantics than a plain two-column <div> grid.
| Use case | Why dl fits |
|---|---|
| Glossary of terms | Term + definition is literally what dl models |
| FAQ section | Question (dt) + answer (dd) |
| Product spec sheet | Label (dt) + value (dd) — "Weight" / "1.2kg" |
| Author metadata | "Published" / "March 2026", "Author" / "Irfana" |
🧩 Knowledge Check — Lesson 12
5 questions to test your description list knowledge.
1. What do <dt> and <dd> represent?
2. Can one <dt> have more than one <dd>?
3. Which content type is the best semantic fit for <dl>?
4. Which element wraps the entire description list?
5. Why is <dl> better than a plain <div> grid for a spec sheet?
Coding Challenge — Lesson 12
Apply what you learned · Beginner Level
Challenge: Build a Mini Glossary and Product Spec
1. Write a <dl> glossary with 3 terms relevant to HTML you've learned so far (e.g. "Element", "Attribute", "Tag").
2. Write a second <dl> as a product spec sheet with 4 label/value pairs (Weight, Dimensions, Color, Price).
Bonus: Give one term two <dd> definitions.
1. Write a <dl> glossary with 3 terms relevant to HTML you've learned so far (e.g. "Element", "Attribute", "Tag").
2. Write a second <dl> as a product spec sheet with 4 label/value pairs (Weight, Dimensions, Color, Price).
Bonus: Give one term two <dd> definitions.
💡 Show hints if you're stuck
- Glossary:
<dl><dt>Element</dt><dd>...</dd></dl> - Spec sheet:
<dt>Weight</dt><dd>1.2kg</dd>
Finished this lesson?
Mark it complete to track your progress.
Module 12 of 62Phase 4 — Lists