List Types

📦 Nested Lists — List Ke Andar List

Nested list jaise Hyderabad ki area hierarchy — Hyderabad → West Zone → Madhapur → Road No. 5 → Building 12. Har level deeper jaata hai. Lists ke andar lists.

Kisi bhi list (ul ya ol) ko dusre list ke <li> ke andar daalo. Browser automatically indent karta hai aur har level ke liye bullet/number style change karta hai. Types mix kar sakte ho — ordered ke andar unordered, unordered ke andar ordered.

🛺

Area Hierarchy Analogy: Hyderabad (city) → Madhapur (area) → Ayyappa Society (colony) → Flat 301 (building). Har level previous ke andar nested hai. Yeh nested list hai — levels ke andar levels.

Code Example

HTML — Nested Lists — List Ke Andar List

<!-- Unordered ke andar unordered -->
<ul>
  <li>Hyderabadi Cuisine
    <ul>
      <li>Biryani
        <ul>
          <li>Mutton Biryani</li>
          <li>Chicken Biryani</li>
          <li>Veg Biryani</li>
        </ul>
      </li>
      <li>Haleem</li>
      <li>Double ka Meetha</li>
    </ul>
  </li>
  <li>Chai
    <ul>
      <li>Irani Chai</li>
      <li>Hyderabadi Dum Chai</li>
    </ul>
  </li>
</ul>

<!-- Ordered ke andar unordered (recipe steps with sub-steps) -->
<ol>
  <li>Biryani prepare karo
    <ul>
      <li>Basmati rice dhona</li>
      <li>Mutton raat bhar marinate karo</li>
      <li>Onions patle slice karo</li>
    </ul>
  </li>
  <li>Rice aur meat layer karo
    <ul>
      <li>First layer: meat</li>
      <li>Second layer: rice</li>
      <li>Third layer: saffron milk</li>
    </ul>
  </li>
  <li>Low flame pe 40 minute cook karo</li>
</ol>

<li> <ul>...Li tag ke andar list nest karo

3 levels deepJitni zaroorat utni levels nest kar sakte ho

Mix ul + olDifferent list types nesting mein mix ho sakte hain

Auto indentBrowser har level automatically indent karta hai

Auto style changeBullet/number har level pe change hota hai

✅ When to Use

Sub-categories — "Biryani → Mutton → Full/Half plate"
Recipe steps ke saath sub-ingredients
Sitemaps — nested page hierarchy
Table of contents with sub-sections
Koi bhi hierarchical data

❌ When NOT to Use

Flat lists bina hierarchy ke (single level kaafi hai)
3 levels se zyada deep (users ko confusion hota hai)
Jab CSS styling bahut complex ho jaaye (accordion use karo)

💡

3 levels se zyada deep mat jaao. Uske baad users track khote hain ki woh kahan hain. Agar deeper hierarchy chahiye toh separate sections mein break karo ya accordion/collapsible component use karo.

← Back to Lists Chapter