List Types

📋 Description Lists — Key-Value Wali List

<dl><dt>Term</dt><dd>Description</dd></dl>

Description list jaise Hyderabad railway timetable board — left side pe station name, right side pe distance aur time. Yeh terms aur unke descriptions ke pairs hain, simple list nahi.

Teen tags: <dl> poori list wrap karta hai, <dt> term hai (key), <dd> description hai (value). Ek dt ke multiple dds ho sakte hain. Ek dd ke multiple paragraphs ho sakte hain. Bahut flexible.

🛺

Railway Analogy: Secunderabad station ka timetable — left side "Kacheguda — 5km — 10min", right side "Falaknuma — 12km — 25min". Har entry mein term (station) aur description (distance + time) hai. Yeh description list hai.

Code Example

HTML — Description Lists — Key-Value Wali List

<!-- Basic description list -->
<dl>
  <dt>Biryani</dt>
  <dd>Dum style mein slow-cooked rice aur meat dish</dd>

  <dt>Haleem</dt>
  <dd>Wheat, barley, meat aur lentils ka slow-cooked stew</dd>

  <dt>Double ka Meetha</dt>
  <dd>Reduced milk, dry fruits, saffron wala bread pudding</dd>
</dl>

<!-- Ek term, multiple descriptions -->
<dl>
  <dt>Paradise Biryani</dt>
  <dd>Secunderabad mein located, since 1953</dd>
  <dd>Mutton Biryani aur Chicken Biryani ke liye famous</dd>
  <dd>Average cost: full plate ₹450</dd>
</dl>

<!-- Metadata ke liye description list -->
<dl>
  <dt>Course</dt>
  <dd>HTML Hyderabad Style</dd>

  <dt>Duration</dt>
  <dd>15 chapters, approximately 3 hours</dd>

  <dt>Price</dt>
  <dd>Free — forever</dd>

  <dt>Certificate</dt>
  <dd>Completion pe digital badge</dd>
</dl>

<dl>Description list wrapper — dt+dd pairs contain karta hai

<dt>Description term — key/label/name

<dd>Description details — value/explanation

Multiple <dd>Ek term ke multiple descriptions ho sakte hain

No <li>Li tags ki zaroorat nahi — dt aur dd hi items hain

✅ When to Use

Glossaries — "Biryani: Ek rice dish..."
Metadata — "Author: Sai, Date: 2025"
FAQ sections — question (dt) + answer (dd)
Product specs — "Weight: 500g, Price: ₹450"
Kisi bhi key-value pairs

❌ When NOT to Use

Simple item lists bina descriptions ke (ul/ol use karo)
Navigation menus (ul use karo)
Step-by-step processes (ol use karo)

💡

Description lists underrated hain. FAQ pages ke liye use karo — screen readers "term" phir "description" announce karte hain jo Q&A format ke liye perfect hai. Har FAQ item ke liye heading + paragraph se bahut achha hai.

← Back to Lists Chapter