How to create an ordered list in HTML?

Updated On: 2024-06-02

To show sequential information or hierarchical Data, we need to use ordered list in html. Here is a complete guide on how to create it with several code examples.

Basic ordered list in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ordered List Example</title>
</head>
<body>
    <h1>Ordered List Example</h1>
    <ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ol>
</body>
</html>

We use <ol> tag to create ordered list in HTML. Here <ol> stands for ordered list. We close this tag using </ol> tag.

Types of Ordered Lists in HTML

01) Number List

02) Uppercase Letters

03) Lowercase Letters

04) Uppercase Roman Numbers

05) Lowercase Roman Numbers

06) Control List Counting

07) Nested Ordered Lists

Number List

HTML number list creates list sequentially using numeric number 1, 2, 3, 4..We have created a list five country names.

<!DOCTYPE html>
<html>
    <head>
        <title>Numbered List by W3codehub</title>
    </head>
    <body>
        <h2>Ordered List with Numbers</h2>
        <ol>
            <li>USA</li>
            <li>Japan</li>
            <li>India</li>
            <li>China</li>
            <li>Canada</li>
        </ol>
    </body>
</html>

Uppercase Letters

<!DOCTYPE html>
<html>
    <head>
        <title>
            Uppercase Letters Ordered List
        </title>
    </head>
    <body>
        <h2>Uppercase Letters Ordered List</h2>
        <ol type="A">
            <li>USA</li>
            <li>Japan</li>
            <li>India</li>
            <li>Canada</li>
        </ol>
    </body>
</html>

Lowercase Letters

<!DOCTYPE html>
<html>
    <head>
        <title>
            Lowercase Letters Ordered List
        </title>
    </head>
    <body>
        <h2>Lowercase Letters Ordered List</h2>
        <ol type="a">
            <li>USA</li>
            <li>Japan</li>
            <li>India</li>
            <li>Canada</li>
        </ol>
    </body>
</html>

Uppercase Roman Numbers

<!DOCTYPE html>
<html>
    <head>
        <title>
            Uppercase Roman Numbers Ordered List
        </title>
    </head>
    <body>
        <h2>
            Uppercase Roman Numbers Ordered List
        </h2>
        <ol type="I">
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
            <li>Fourth item</li>
        </ol>
    </body>
</html>

Lowercase Roman Numbers

<!DOCTYPE html>
<html>
    <head>
        <title>
            Lowercase Roman Numbers Ordered List
        </title>
    </head>
    <body>
        <h2>
            Lowercase Roman Numbers Ordered List
        </h2>
        <ol type="i">
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
            <li>Fourth item</li>
        </ol>
    </body>
</html>

Control List Counting

<!DOCTYPE html>
<html>
    <head>
        <title>Control List Counting</title>
    </head>
    <body>
        <h2>Control List Counting</h2>
        <ol start="5">
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
        </ol>
    </body>
</html>

Nested Ordered Lists

<!DOCTYPE html>
<html>
    <head>
        <title>Nasted Ordered List</title>
    </head>
    <body>
        <h2>Nasted Ordered List</h2>
        <ol>
            <li>
                JavaScript
                <ol>
                    <li>React</li>
                    <li>Angular</li>
                    <li>Vue.js</li>
                </ol>
            </li>
            <li>
                Python
                <ol>
                    <li>Django</li>
                    <li>Flask</li>
                    <li>Pyramid</li>
                </ol>
            </li>
        </ol>
    </body>
</html>

Related Resources

For more information, you can use the following resources:

HTML Ordered Lists at Geeksforgeeks

The Ordered List element at mdn

HTML List at FreeCodeCamp

HTML Ordered Lists at W3schools

How To

How to create an ordered list in HTML?

Basic ordered list in HTML

Types of Ordered Lists in HTML

Number List

Uppercase Letters

Lowercase Letters

Uppercase Roman Numbers

Lowercase Roman Numbers

Control List Counting

Nested Ordered Lists

Related video

Related Resources

How To

How to create an ordered list in HTML?

Basic ordered list in HTML

Types of Ordered Lists in HTML

Number List

Uppercase Letters

Lowercase Letters

Uppercase Roman Numbers

Lowercase Roman Numbers

Control List Counting

Nested Ordered Lists

Related video

Related Resources

Related Reads