HTML Ordered Lists

Ordered lists are used when the sequence or order of items is important. They display list items using numbers or other ordered markers.

---

1. What is an Ordered List?

An ordered list is created using the <ol> element. Each item inside the list is created using the <li> element.

<ol>
    <li>Step One</li>
    <li>Step Two</li>
    <li>Step Three</li>
</ol>

2. The ol Element

The <ol> element defines the ordered list container.

<ol>

    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>

</ol>

3. The li Element

The <li> element represents one item in an ordered list.

<ol>

    <li>Open the browser</li>
    <li>Create an HTML file</li>
    <li>Write HTML code</li>

</ol>

4. Default Numbering

By default, browsers display ordered list items using decimal numbers starting from 1.

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

5. Ordered List for Steps

Ordered lists are useful for instructions where the sequence matters.

<h2>How to Create an HTML File</h2>

<ol>
    <li>Open a text editor.</li>
    <li>Create a new file.</li>
    <li>Save the file with .html extension.</li>
    <li>Open the file in a browser.</li>
</ol>

6. type Attribute

The type attribute specifies the marker style used by the ordered list.

Type	Marker Style	Example
1	Decimal numbers	1, 2, 3
A	Uppercase letters	A, B, C
a	Lowercase letters	a, b, c
I	Uppercase Roman numerals	I, II, III
i	Lowercase Roman numerals	i, ii, iii

7. Decimal Numbering

<ol type="1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

8. Uppercase Letters

Use type="A" for uppercase alphabetic markers.

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

9. Lowercase Letters

<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

10. Uppercase Roman Numerals

<ol type="I">
    <li>Introduction</li>
    <li>Basic HTML</li>
    <li>Advanced HTML</li>
</ol>

11. Lowercase Roman Numerals

<ol type="i">
    <li>Introduction</li>
    <li>Basic HTML</li>
    <li>Advanced HTML</li>
</ol>

12. start Attribute

The start attribute specifies the starting number of an ordered list.

<ol start="5">
    <li>Item Five</li>
    <li>Item Six</li>
    <li>Item Seven</li>
</ol>

13. Starting from a Different Letter

The start attribute works with other ordered list marker types as well.

<ol type="A" start="3">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ol>

14. reversed Attribute

The reversed attribute displays an ordered list in descending order.

<ol reversed>
    <li>Step Three</li>
    <li>Step Two</li>
    <li>Step One</li>
</ol>

15. reversed with start

The reversed and start attributes can be combined.

<ol reversed start="5">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

16. value Attribute on li

The value attribute on an <li> element can specify the marker value for that item.

<ol>

    <li value="10">Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>

</ol>

17. Ordered List with Links

List items can contain hyperlinks.

<ol>

    <li>
        <a href="html.html">Learn HTML</a>
    </li>

    <li>
        <a href="css.html">Learn CSS</a>
    </li>

    <li>
        <a href="javascript.html">Learn JavaScript</a>
    </li>

</ol>

18. Ordered List with Nested List

An ordered list can contain another list inside one of its items.

<ol>

    <li>
        Frontend

        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>

    </li>

    <li>
        Backend

        <ul>
            <li>C#</li>
            <li>.NET</li>
            <li>SQL</li>
        </ul>

    </li>

</ol>

19. Multiple Nested Levels

Ordered lists can have several nested levels.

<ol>

    <li>
        Web Development

        <ol>

            <li>
                Frontend

                <ol>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ol>

            </li>

            <li>
                Backend

                <ol>
                    <li>C#</li>
                    <li>.NET</li>
                    <li>SQL</li>
                </ol>

            </li>

        </ol>

    </li>

</ol>

20. Ordered List for Tutorials

Ordered lists are useful for displaying learning steps.

<h2>Steps to Learn HTML</h2>

<ol>

    <li>Learn HTML syntax.</li>
    <li>Learn HTML elements.</li>
    <li>Learn HTML attributes.</li>
    <li>Practice forms and tables.</li>
    <li>Build a project.</li>

</ol>

21. Ordered List for a Process

<h2>Login Process</h2>

<ol>

    <li>Open the login page.</li>
    <li>Enter your username.</li>
    <li>Enter your password.</li>
    <li>Click the Login button.</li>
    <li>Access your dashboard.</li>

</ol>

22. Ordered List with CSS

CSS can be used to customize the appearance and spacing of ordered lists.

<style>

    .steps {
        padding-left: 25px;
        line-height: 1.8;
    }

</style>

<ol class="steps">

    <li>Create HTML file.</li>
    <li>Write HTML structure.</li>
    <li>Open the file in browser.</li>

</ol>

23. Ordered List with Custom Counter

CSS counters can be used to create custom numbering designs.

<style>

    .custom-list {
        counter-reset: step;
        list-style: none;
        padding: 0;
    }

    .custom-list li {
        counter-increment: step;
        margin-bottom: 10px;
    }

    .custom-list li::before {
        content: "Step " counter(step) ": ";
        font-weight: bold;
    }

</style>

<ol class="custom-list">

    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>

</ol>

24. Difference Between Ordered and Unordered Lists

Ordered List	Unordered List
Uses <ol>.	Uses <ul>.
Displays ordered markers.	Displays bullets by default.
Useful when sequence matters.	Useful when sequence does not matter.
Supports numbers, letters, and Roman numerals.	Supports different bullet styles.

25. Common Mistakes

• Using an ordered list when item order is not important.
• Forgetting to place items inside <li>.
• Using unnecessary nested ordered lists.
• Using confusing numbering structures.
• Using CSS only to visually number content that has no logical sequence.

26. Best Practices

• Use <ol> when sequence or ranking matters.
• Use <li> for each list item.
• Use start only when a non-default starting value is required.
• Use reversed when descending order is meaningful.
• Use CSS for visual customization.
• Keep nested lists logically organized.

27. Practice Task

28. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>Ordered List Example</title>

    <style>

        .learning-steps {
            padding-left: 25px;
            line-height: 1.8;
        }

    </style>

</head>

<body>

    <h1>Steps to Become a Web Developer</h1>

    <ol class="learning-steps">

        <li>Learn HTML</li>
        <li>Learn CSS</li>
        <li>Learn JavaScript</li>
        <li>Learn a backend technology</li>
        <li>Learn SQL</li>
        <li>Build real projects</li>

    </ol>

    <h2>Frontend Topics</h2>

    <ol type="A">

        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>

    </ol>

    <h2>Advanced Topics</h2>

    <ol type="I">

        <li>Accessibility</li>
        <li>SEO</li>
        <li>Performance</li>

    </ol>

</body>

</html>