HTML Ordered Lists

An HTML ordered list is used to group items where the order matters. Items are displayed with numbers by default, making them ideal for steps, rankings, and sequences.

---

Basic Ordered List

Use the <ol> tag to create an ordered list. Each item goes inside an <li> tag:

<ol>
    <li>Preheat the oven</li>
    <li>Mix the ingredients</li>
    <li>Pour into baking pan</li>
    <li>Bake for 30 minutes</li>
</ol>

Result:

1. Preheat the oven
2. Mix the ingredients
3. Pour into baking pan
4. Bake for 30 minutes

---

The type Attribute

Use the type attribute on <ol> to change the numbering style:

Value	Description	Example
1	Numbers (default)	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.

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

Result:

1. First item
2. Second item
3. Third item

---

The start Attribute

Use start to begin numbering from a specific number other than 1:

<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
    <li>Seventh item</li>
</ol>

Result:

5. Fifth item
6. Sixth item
7. Seventh item

---

The reversed Attribute

The reversed attribute counts down instead of up:

<ol reversed>
    <li>Gold medal</li>
    <li>Silver medal</li>
    <li>Bronze medal</li>
</ol>

Result:

1. Gold medal
2. Silver medal
3. Bronze medal

---

Nested Ordered Lists

You can nest ordered or unordered lists inside each other:

<ol>
    <li>Frontend Development
        <ol type="a">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>
    </li>
    <li>Backend Development
        <ol type="a">
            <li>PHP</li>
            <li>Python</li>
        </ol>
    </li>
</ol>