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

Last Updated : 30 Jan, 2024

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.

A list is a record of short pieces of related information used to display the data or any information on web pages in the ordered or unordered form. For example, to purchase the items, we need to prepare a list that can either be ordered or unordered list which helps us to organize the data and easy to find the item. In this article, we will discuss a nested list in HTML. These tags are used in HTML listing.

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

Table of Content

HTML Unordered List:
HTML Ordered List:

HTML Unordered List:

An unordered list starts with the “ul” tag. Each list item starts with the “li” tag. 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>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Nested Unordered List</h2>
    <p>GeeksforGeeks courses list:</p>
 
    <ul>
        <li>DSA</li>
        <ul>
            <li>Array</li>
            <li>Linked List</li>
            <li>stack</li>
            <li>Queue</li>
        </ul>
        <li>Web Technologies</li>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <li>Aptitude</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>
 
</html>

Output:

HTML Ordered List:

An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. 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>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <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>