HTML Nested Lists

HTML nested lists are lists placed inside other lists. They help organize information into main items and subitems, making content easier to understand. You can create nested lists using HTML ordered lists (<ol>) and unordered lists (<ul>).

Nested lists are commonly used for website navigation menus, tutorials, categories, product features, and hierarchical information. By combining different list types, you can display information in a clear, structured format.

What Is an HTML Nested List?

An HTML nested list is a list placed inside a list item (<li>) of another list. The inner list represents additional information related to its parent item.

For example, a website development list might contain Frontend Development as the main item, with HTML, CSS, and JavaScript as subitems.

HTML Nested List Syntax

You can create a nested list by placing an <ol> or <ul> element inside an existing <li> element.

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

In this example, HTML, CSS, and JavaScript appear as subitems under Frontend Development.

HTML Nested Unordered Lists

An unordered nested list uses bullet points to organize items into categories and subcategories. It is useful when the order of items is not important.

Example of a Nested Unordered List

<h2>Web Development</h2>

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>PHP</li>
        </ul>
    </li>
</ul>

The browser displays Frontend and Backend as the main items, with their respective technologies listed underneath.

HTML Nested Ordered Lists

An ordered nested list uses numbers or other sequential markers to organize items. It is useful for instructions, tutorials, and step-by-step processes.

Example of a Nested Ordered List

<h2>Steps to Build a Website</h2>

<ol>
    <li>Plan the website
        <ol>
            <li>Choose a topic</li>
            <li>Create a page structure</li>
        </ol>
    </li>
    <li>Develop the website
        <ol>
            <li>Write HTML</li>
            <li>Add CSS</li>
            <li>Implement JavaScript</li>
        </ol>
    </li>
</ol>

Each main step contains additional steps. Browsers automatically number the list items according to their nesting level and list type.

Mixing Ordered and Unordered Lists

HTML allows you to combine ordered and unordered lists within the same structure.

<ol>
    <li>Learn Web Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Practice Projects</li>
</ol>

In this example, the main items are numbered, while the nested technologies use bullet points.

HTML Nested Lists: Important Elements

HTML Element	Purpose
`<ul>`	Creates an unordered list.
`<ol>`	Creates an ordered list.
`<li>`	Defines a list item.

A nested list should be placed inside a parent <li> element. This structure helps browsers and assistive technologies understand the relationship between main items and subitems.