Nested Lists in HTML

Nested list वह list होती है जिसमें एक list के item के अंदर दूसरी list होती है। HTML में nested lists का उपयोग hierarchical या sub-level information दिखाने के लिए किया जाता है।

Common use cases:

• Categories और sub-categories
• Menus और sub-menus
• Outline या steps के अंदर sub-steps

Basic Nested Unordered List

एक <ul> के अंदर <li> और उसी <li> के अंदर दूसरी <ul> रखी जाती है।

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Nested Ordered List

Ordered list के अंदर ordered list भी बनाई जा सकती है।

<ol>
  <li>Install Software
    <ol>
      <li>Download File</li>
      <li>Run Installer</li>
    </ol>
  </li>
  <li>Start Application</li>
</ol>

Mixed Nested List

Unordered और ordered lists को mix भी किया जा सकता है।

<ul>
  <li>Programming Languages
    <ol>
      <li>Python</li>
      <li>Java</li>
      <li>JavaScript</li>
    </ol>
  </li>
</ul>

Correct Nesting Structure

Nested list हमेशा <li> के अंदर ही रखनी चाहिए।

गलत:

<ul>
  <li>HTML</li>
  <ul>
    <li>Tags</li>
  </ul>
</ul>

सही:

<ul>
  <li>HTML
    <ul>
      <li>Tags</li>
    </ul>
  </li>
</ul>

Default Styling of Nested Lists

Browser automatically nested lists को indent करता है और bullets बदल देता है।

First level
• disc

Second level
○ circle

Third level
■ square

यह browser पर depend कर सकता है।

CSS से Nested List Styling

Nested lists के indentation और bullets को control किया जा सकता है।

ul ul {
  margin-left: 20px;
  list-style-type: circle;
}

Nested Lists को Horizontal या Menu के रूप में इस्तेमाल करना

Navigation menus में nested lists sub-menu के लिए use होती हैं।

<ul class="menu">
  <li>Services
    <ul class="submenu">
      <li>Web Design</li>
      <li>SEO</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

.menu ul {
  list-style: none;
  padding-left: 20px;
}

Nested Ordered List Numbering Control

Ordered list में numbering style बदली जा सकती है।

ol ol {
  list-style-type: lower-alpha;
}

Deep Nested Lists

Multiple levels की nesting possible है, लेकिन readability का ध्यान रखना चाहिए।

<ul>
  <li>Level 1
    <ul>
      <li>Level 2
        <ul>
          <li>Level 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Accessibility और Nested Lists

• Semantic list structure screen readers के लिए helpful होती है।
• Proper indentation और hierarchy users को content समझने में मदद करती है।
• Unnecessary deep nesting avoid करना चाहिए।

Nested Lists Best Practices

• Nested list हमेशा <li> के अंदर रखें.
• Levels को limited रखें.
• CSS से indentation control करें.
• Navigation के लिए semantic structure बनाए रखें.

Nested Lists in HTML Summary

• Nested list एक list के अंदर दूसरी list होती है.
• Unordered और ordered lists दोनों nested हो सकती हैं.
• Correct nesting structure ज़रूरी है.
• CSS से nested lists को customize किया जा सकता है.