Nesting Lists

layers What is List Nesting?

  • Placing one list inside another
  • Creates hierarchical structure
  • Useful for organizing complex information

code How to Nest Lists

HTML
<ul>
  <li>First item</li>
  <li>Second item
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Third item</li>
</ul>
Key Points
  • Nested lists must be inside a list item (<li>)
  • Can mix different list types (ul inside ol, etc.)
  • CSS can style nested lists differently

format_list_bulleted Nested Unordered Lists

desktop_windows Browser Preview
  • First item
  • Second item
    • Subitem 1
    • Subitem 2
    • Subitem 3
  • Third item

format_list_numbered Ordered Lists Inside Unordered

desktop_windows Browser Preview
  • First item
  • Second item
    1. Step 1
    2. Step 2
    3. Step 3
  • Third item

lightbulb Practical Application

Recipe Instructions
  • Process ingredients
    • For chunky: short time
    • For smooth: longer time
Navigation Menu
  • Products
    • Category A
    • Category B