Nested Lists in HTML (with Code Examples)

Updated on October 29, 2023 by Muhammad Zeeshan

In this tutorial, you’ll see what nested lists in HTML are, their syntax, how to create nested lists, code examples, and more.

What are Nested Lists in HTML?

In short, HTML nested lists simply mean a list inside another list. It can be an unordered list or an ordered list. There are some places comes in the web development process where nested lists or sublists are used.

For example, nested drop-down menus lists, nested categories lists, etc.

This is what a nested list looks like:

In the above image, the first nested list example is very simple. While the other example shows an HTML nested list that contains different recipes. You can also use these types of lists to create your site menus or categories.

Tip:

If you don’t know, how many types of lists have in HTML. Then, check out this guide about HTML list types.

How to Create Nested Lists in HTML

To create a nested list in HTML, you simply need to put list elements inside one another. You will understand this after seeing the syntax below.

For example, if it is an unordered list then put <ul> tag inside an <ul> as shown in the following code example.

In the above case, the ul element that is located inside is a child of another ul element.

Code Output:

More Than One Nested Lists in One

One list can contain many other nested lists in HTML. This is how:

→ index.html

<ul>
    <li>Recipes</li>
        <ul>
            <li>Christmas Recipes</li>
                <ul>
                    <li>Rolled Sugar Cookies</li>
                    <li>Sweet Potato Casserole</li>
                    <li>Apple Pie</li>
                </ul>
            <li>Fall Recipes</li>
                <ul>
                    <li>Pasta</li>
                    <li>Pancakes</li>
                        <ul>
                            <li>Pancakes 1</li>
                            <li>Pankes 2</li>
                        </ul>
                    <li>Pumpkin Pie</li>
                </ul>
            <li>Indian Recipes</li>
                <ul>
                    <li>Butter Chicken</li>
                    <li>Chicken Tikka</li>
                    <li>Chicken Biryani</li>
                </ul>
        </ul>
    <li>Ingredients</li> 
    <li>Kitchen Tips</li>
</ul>

The above example of a nested list shows many other lists inside one. The output below is clearly showing how it will look in the browser.

Code Output:

more than one lists inside another list example

An unordered list can also contain an ordered list and vice versa.

→ index.html

<ul>
    <li>Recipes</li>
        <ol>
            <li>Rolled Sugar Cookies</li>
            <li>Sweet Potato Casserole</li>
            <li>Apple Pie</li>
        </ol>
    <li>Ingredients</li> 
    <li>Kitchen Tips</li>
</ul>

Tip:

If you want to remove the bullets and numbers from the list items. Then, read this guide about HTML lists without bullets.

This is how you can create nested lists in HTML.

Furthermore, you can use the CSS list-style-image property to show images instead of bullets for lists.

That’s all. If you have any questions then just leave a comment below.

Topic: HTML

About The Author

Muhammad Zeeshan

Hi everyone, I'm a Full Stack Web Developer and Technical Writer. I just love to share my knowledge to help others in this community. I mostly write about HTML, CSS, JS, MySQL, and PHP.