8. Lists Architecture

1. Semantics of Ordered (ol) vs Unordered (ul)

Basic: Bullet points ke liye <ul>, numbering ke liye <ol> aur lists items ko <li> mein rakhte hain.

Pro: UI design mein CSS list bullets ko hata deta hai (list-style: none). Phir hum lists kyu use karte hain? Semantics ke liye. Jab Screen reader list block pe enter karta hai, wo bolta hai "List containing 5 items", jisse user mentally prepare ho jata hai. Ek generic div grouping ye accessible feature nahi de sakta.

2. Ordered List Advanced Attributes

Pro: <ol> tag ka state-management inbuilt hota hai:

• type="A|a|I|i|1": Numbering style badalne ke liye (Alphabets, Roman numbers).
• start="11": List 1 ki jagah specific number (jaise 11) se shuru hogi. Paginated lists mein bohot use hota hai.
• reversed: Ek boolean attribute jisse numbering descending (5, 4, 3..) ho jati hai. Top charts aur rankings dikhane ke liye bina kisi JS iteration logic ke.

3. Nested Lists (Drop-down Navigation Core)

Pro: Nested list banate waqt HTML rules ka strict hona zaruri hai. A child list <ul> or <ol> CANNOT be a direct child of another <ul>. Ye hamesha Parent <li> ke andar wrap hona chahiye:

<ul>
  <li>Men's Clothing
    <ul>
      <li>Shirts</li>
    </ul>
  </li>
</ul>

Sari duniya ki complex e-commerce mega-menus isi HTML nested structure par CSS hover selectors laga kar chalai jati hain.

4. Description Lists (dl, dt, dd) - The Underdog

Pro: Dictionary type data (Key-Value pairs) ko semantic way se present karne ke liye <dl> use hota hai.
<dt> (Description Term) question, word ya key hoti hai. <dd> (Description Details) uska answer, meaning ya value hoti hai. E-commerce sites par products ke 'Specifications' tables banane ke liye, ya FAQ accordions banane ke liye yeh structure technical SEO ke perspective se bohot rich mana jata hai.