MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome back! In the previous lesson, you learned how to create bulleted lists (<ul>) and numbered lists (<ol>).
Now, open your school Science, History, or Computer textbook and flip to the very last few pages. What do you see?
You will find a special section called the Glossary (or Vocabulary Index)!
Now look at your school Identity Card (ID Card):
Notice this pattern? It is not a bulleted shopping list, and it is not a numbered 1-2-3 recipe. It is a list of Terms paired directly with their Descriptions (also known as Key-Value Pairs)!
In HTML, we have a specialized list made specifically for this: the Description List (<dl>)!
A Description List does not use <li> (List Item) tags. Instead, it uses three special tags that work together as a team:
| Tag | Full Name | What It Does (The Real-World Role) |
|---|---|---|
<dl> | Description List | The outer wrapper box that encloses the entire glossary or list. |
<dt> | Description Term | The Word, Title, or Question you are defining. |
<dd> | Description Details | The Definition, Answer, or Explanation of the term. |
Let's look at a simple Computer Science glossary:
When you open this code in your web browser, notice something cool:
<dt> terms appear on the left margin.<dd> explanation inward with a little margin space!This gives your content a clean, professional dictionary layout without writing any custom CSS!
Description lists are widely used by professional web designers for three major layouts:
Whenever you want to display personal details, game character statistics, or product specifications:
Every modern website has an FAQ section. A description list is the semantic, accessible way to code questions and answers:
You can create clean physics and chemistry reference cheat-sheets:
Did you know that you don't always have to write strictly one <dt> followed by one <dd>? HTML gives you flexibility!
Just like an English dictionary word can have two different meanings:
When two different words mean the exact same thing:
<ul> vs <ol> vs <dl> 🏆Here is your master cheat-sheet comparing all three HTML list types:
| Feature | Unordered List (<ul>) | Ordered List (<ol>) | Description List (<dl>) |
|---|---|---|---|
| Primary Meaning | Order does NOT matter | Sequence / Rank matters | Terms paired with definitions |
| Child Tags | <li> | <li> | <dt> and <dd> (NO <li>) |
| Default Marker | Black bullets (•) | Numbers (1., 2., 3.) | Indented margin for <dd> |
| Real-Life Example | Pencil box items, shopping lists | Chai recipe, cricket batting lineup | Science glossary, Student ID, FAQ |
| Best For | Bullet points & navigation links | Step-by-step guides & rankings | Dictionaries, profiles, key-value data |
<li> tags inside <dl>This is the #1 mistake students make! Description lists never use <li>. They only use <dt> and <dd>.
<dt> and <dd>t is for Term (the word).d is for Description (the explanation).<dl> tagNever float a <dt> or <dd> on its own without wrapping it inside a <dl>...</dl> container.
<dl>) organizes terms and their matching descriptions (key-value pairs).<dt> defines the Description Term (the word, question, or label).<dd> defines the Description Details (the definition, answer, or value).<dd> elements inward for a clean reading layout.<dd> tags for a single <dt> (e.g. words with multiple definitions).<li> tags inside a <dl>!Test your understanding with these multiple-choice questions:
<dt> tag stand for in HTML?<dd> tag stand for in HTML?<dl>?<dd> from <dt>?Open VS Code and create a file named space-glossary.html.
Build an "Indian Space Missions Glossary" celebrating ISRO using <dl>, <dt>, and <dd>:
<dl> inside a light gray bordered card.<dt>Chandrayaan-3</dt> and describe its historic soft-landing on the Moon's South Pole in <dd>.<dt>Aditya-L1</dt> and describe its mission to study the Sun from the Lagrange Point 1 in <dd>.<dt>Gaganyaan</dt> and explain India's upcoming human spaceflight mission.<dt>ISRO</dt> and <dt>Indian Space Research Organisation</dt> sharing a single <dd> explaining the national space agency.Congratulations! You have completed Chapter 7: Lists! You are now a master at organizing data with bullet points, numbered rankings, and dictionary glossaries!
In the next lesson, we will continue your web development journey with HTML Tables (Table).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Unordered & Ordered Lists | HTML Tables |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.