HTML Nested List – Unordered, Ordered और Mixed Lists

HTML Nested List का उपयोग multi-level या hierarchical जानकारी दिखाने के लिए किया जाता है। इस लेख में जानिए nested unordered, ordered, और mixed lists कैसे बनाई जाती हैं, syntax, examples और CSS styling – सब कुछ step-by-step हिंदी में।

---

🔷 HTML Nested List क्या है?

जब हम एक list के अंदर दूसरी list बनाते हैं, उसे Nested List कहते हैं।
Nested Lists का उपयोग तब होता है जब किसी item के sub-items भी हों — जैसे categories, menus, topics & subtopics आदि।

Nested Lists सभी प्रकार की lists में बनाई जा सकती हैं:

• Unordered List (<ul>)
• Ordered List (<ol>)
• Description List (<dl>)

---

🔨 Basic Syntax:

<ul>
  <li>Main Item 1</li>
  <li>Main Item 2
    <ul>
      <li>Sub Item 2.1</li>
      <li>Sub Item 2.2</li>
    </ul>
  </li>
  <li>Main Item 3</li>
</ul>

📌 यहाँ <li> के अंदर एक और <ul> रखी गई है — जो nested list है।

---

🧪 Example 1: Nested Unordered List

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Mango</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

📌 Output:

• Fruits  
    • Apple  
    • Mango  
    • Banana  
• Vegetables

---

🧪 Example 2: Nested Ordered List

<ol>
  <li>Chapter 1</li>
  <li>Chapter 2
    <ol>
      <li>Section 2.1</li>
      <li>Section 2.2</li>
    </ol>
  </li>
</ol>

📌 Output:

1. Chapter 1  
2. Chapter 2  
   1. Section 2.1  
   2. Section 2.2

---

🧪 Example 3: Mixed Lists (Ordered + Unordered)

<ol>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>PHP</li>
    </ul>
  </li>
</ol>

📌 Main list numbered होगी और sub-list bullets में।

---

🎨 CSS Styling for Nested Lists

<style>
  ul, ol {
    margin: 0;
    padding-left: 20px;
  }

  li {
    margin-bottom: 5px;
  }
</style>

✅ यह spacing और indentation को maintain करता है।

---

✅ Practice Task

1. एक nested unordered list बनाइए जिसमें categories और sub-categories हों।
2. एक ordered list के अंदर unordered list रखें।
3. तीन-level nested list create करें (multi-sub-items के साथ)।

---

❗ अक्सर होने वाली गलतियाँ

गलती	समाधान
<ul> को <li> के बाहर रखा गया	हमेशा nested list को <li> के अंदर रखें
Extra spacing और alignment गड़बड़	Proper CSS padding और margin use करें
Confusing list structure	पहले paper पर structure बनाएं फिर code करें

---

🧠 SEO & UX टिप्स

• Hierarchical content को nested list से represent करना SEO-friendly होता है
• Navigation, FAQs और Topic Structure में nested list बहुत उपयोगी होती है
• Mobile devices के लिए proper indentation और spacing रखें

---

🔚 Conclusion

• Nested list HTML में hierarchical या multi-level जानकारी दिखाने का सबसे अच्छा तरीका है
• आप unordered, ordered या दोनों को mix करके powerful structures बना सकते हैं
• CSS से इन्हें visually बेहतर बनाया जा सकता है