Nesting HTML Lists: Creating Complex Structures with ul and ol

Note:
This page is part of the Complete HTML Guide for Beginners. Consult the main index for an overview of all topics.

---

Lists Inside
Other Lists

LISTS INSIDE OTHER LISTS: HOW TO NEST <ul> AND <ol> IN HTML

Sometimes, a simple list isn't enough. You might need to create sub-lists, more complex structures where an item in one list contains another list itself. Think of a navigation menu with sub-menus, categories with sub-categories, or instructions with sub-steps. This is where list nesting comes into play, kind of like Russian nesting dolls, one inside the other.

The fundamental thing to understand is where to insert the "child" list (the nested one). The rule is simple but strict:

A nested list (<ul> or <ol>) must be inserted inside an <li> element of the "parent" list.

You cannot put a <ul> or <ol> directly inside another <ul> or <ol> without first enclosing it in an <li>. Doing so would be an HTML structure error that could lead to incorrect display and accessibility issues. The nested list is, effectively, part of the content of that specific item in the parent list.

Let's See an Example: Categories and Sub-categories

Imagine we want to create a list of product categories for a fictional e-commerce site, "The Online Marketplace". Some categories will have sub-categories.

<h2>Product Categories</h2>
<ul>
    <li>Electronics
    <ul>
        <li>Smartphones</li>
        <li>Televisions</li>
        <li>Accessories</li>
    </ul>
    </li>
    <li>Clothing
    <ul>
        <li>Men</li>
        <li>Women</li>
        <li>Children</li>
    </ul>
    </li>
    <li>Books</li>
    <li>Home & Garden</li>
</ul>

Let's Analyze the Code:

• We have a main unordered list (<ul>).
• The first two items (<li>Electronics</li> and <li>Clothing</li>) contain inside them, before the closing </li> tag, another <ul> list.
• This second <ul> (the nested list) in turn contains its own <li> elements (the sub-categories).
• The items <li>Books</li> and <li>Home & Garden</li> do not have sub-lists, so they are simple <li> elements.
• Note the indentation in the code: although not required by the browser, it greatly helps in understanding the hierarchical structure at a glance.

The Result in the Browser

Browsers usually display nested lists with an indent and often use a different marker for the list items (e.g., solid dots for the first level, hollow dots or squares for the second).

Product Categories
• Electronics
    • Smartphones
    • Televisions
    • Accessories
• Clothing
    • Men
    • Women
    • Children
• Books
• Home & Garden

Can You Mix List Types?

Absolutely! You can nest an <ol> inside a <ul>, a <ul> inside an <ol>, an <ol> inside another <ol>, and so on. The rule always remains the same: the nested list goes inside the <li> of the parent list.

Mixed Example: Instructions with Bulleted Sub-list

<h2>Simple Recipe</h2>
<ol>
    <li>Prepare the ingredients:
    <ul>
        <li>Flour</li>
        <li>Eggs</li>
        <li>Milk</li>
    </ul>
    </li>
    <li>Mix the dry ingredients.</li>
    <li>Gradually add the liquids.</li>
    <li>Bake at 180 degrees.</li>
</ol>

Here, the first step (<li>Prepare the ingredients:</li>) of the ordered list contains an unordered list (<ul>) to list the specific ingredients, as their order is not relevant in that sub-list.

Key Points to Remember:

• To create sub-lists or hierarchical structures, you need to nest lists.
• The golden rule: a new list (<ul> or <ol>) always goes inside an <li> tag of the list containing it.
• You can nest <ul> in <ul>, <ul> in <ol>, <ol> in <ul>, <ol> in <ol>, and even at multiple levels (lists inside lists inside lists...).
• Code indentation is not mandatory for functionality, but it is an essential practice for keeping the code readable and understandable.

---