HTML Ordered List

What is an HTML Ordered List?

An HTML ordered list is used when the order of items matters, such as steps in a process or rankings. It automatically numbers or letters each item in the list.

To create an ordered list, use the <ol> tag, and each item inside it is wrapped in the <li> (list item) tag.

Basic Structure

Here’s a simple example of an ordered list:

<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

• <ol>: Starts the ordered list.
• <li>: Each list item is wrapped in this tag.

Customizing the Numbering Style

You can change how items are numbered using the type attribute:

• Roman numerals:

<ol type="I">
    <li>Step one</li>
    <li>Step two</li>
</ol>

• Letters (A, B, C…):

<ol type="A">
    <li>First item</li>
    <li>Second item</li>
</ol>

You can also control where the numbering starts with the start attribute. For example, to start at 5:

<ol start="5">
    <li>Step five</li>
    <li>Step six</li>
</ol>

Nested Ordered Lists

You can nest ordered lists within each other for substeps or subcategories:

<ol>
    <li>Main step
        <ol>
            <li>Substep 1</li>
            <li>Substep 2</li>
        </ol>
    </li>
</ol>

Conclusion

HTML ordered lists are great for presenting information in a specific order. You can customize the numbering, change the starting point, and even nest lists for more complex structures.