What is nesting of list & how to create the nested list in HTML ?

Last Updated : 23 Jul, 2025

Nesting of lists in HTML involves placing one list within another list item, creating a hierarchical structure. This is done by embedding a <ul> (unordered) or <ol> (ordered) list inside an <li> (list item) element.

The proper way to make a nested HTML list is to use the <ul> or <ol> element as a child of the <li> element it belongs to.

Note: The <ul> attributes are not supported by HTML5.

Table of Content

Nested Unordered List in HTML:
Nested Ordered List in HTML:

Nested Unordered List in HTML:

A nested unordered list in HTML creates a hierarchical structure by placing a <ul> element inside an <li> of another <ul>. This allows for sublists within main list items, The list items are marked with bullets i.e small black circles by default.

Syntax:

<ul> ....</ul>

Attribute values:

Attribute Values	Description
compact	It will render the list smaller.
type	It specifies which kind of marker is used in the list.

Example: This example shows a nested unordered list. It is used to nest the list items i.e list inside another list.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Nested Unordered List in HTML</title>
</head>

<body>
    <h2>Nested Unordered List</h2>
    <p>GeeksforGeeks courses list:</p>

    <ul>
        <li>DSA
            <ul>
                <li>Array</li>
                <li>Linked List</li>
                <li>Stack</li>
                <li>Queue</li>
            </ul>
        </li>
        <li>Web Technologies
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>Aptitude</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>

</html>

Output:

Nested-Unordered-List-in-HTML — Nested Unordered List in HTML Example Output

Nested Ordered List in HTML:

Nested ordered lists in HTML organize content hierarchically, where each sublist is numbered sequentially. By embedding <ol> elements within <li> elements, sublists are created within main list items, The list items are marked with numbers by default.

Syntax:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Attribute values:

Attribute Values	Description
compact	It defines the list should be compacted (compact attribute is not supported HTML5. Instead use CSS).
reversed	It defines that the order will be descending.
start	It defines the starting number or alphabet for the order list.
type	It defines which type (1, A, a, I, and i) of the order you want in your list numeric, alphabetic, or roman numbers.

Example: In this example, we will show a nested ordered list with help of a HTML document.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Nested Ordered List in HTML</title>
</head>

<body>
    <h2>Nested Ordered List</h2>
    <ol>
        <li>Coffee</li>
        <li> Tea
            <ol>
                <li>Black tea</li>
                <li>Green tea</li>
            </ol>
        </li>
        <li>Milk</li>
    </ol>
</body>

</html>

Output:

Nested-Ordered-List-in-HTML — Nested Ordered List in HTML Example Out

What is nesting of list & how to create the nested list in HTML ?

G

gottumukkala_sivanagulu

Improve

Article Tags :

Explore