06. Nested Lists

Introduction

Nested lists are lists contained within other lists, creating hierarchical structures. They’re useful for organizing complex information, creating subcategories, and building multi-level navigation menus. HTML supports nesting any list type within another list.

Basic Nested Lists

<ul>
    <li>Item 1</li>
    <li>Item 2
        <ul>
            <li>Subitem 2.1</li>
            <li>Subitem 2.2</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>

Mixed List Types

You can nest different list types:

<ol>
    <li>Main step
        <ul>
            <li>Sub-step A</li>
            <li>Sub-step B</li>
        </ul>
    </li>
    <li>Another main step</li>
</ol>

Common Use Cases

Multi-Level Navigation

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li>
            <a href="/products">Products</a>
            <ul>
                <li><a href="/products/item1">Item 1</a></li>
                <li><a href="/products/item2">Item 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

Hierarchical Content

<ul>
    <li>Category A
        <ul>
            <li>Subcategory 1</li>
            <li>Subcategory 2</li>
        </ul>
    </li>
    <li>Category B</li>
</ul>

Best Practices

Proper Nesting

Ensure proper HTML structure:

<!-- Good: Proper nesting -->
<ul>
    <li>Item
        <ul>
            <li>Subitem</li>
        </ul>
    </li>
</ul>

Accessibility

Screen readers can navigate nested structures properly when marked up correctly.

References

• MDN Web Docs - HTML Lists