HTML Ordered List – A Complete Guide

What is an Ordered List in HTML?

An ordered list in HTML is a list of items displayed in a specific sequence using numbers or letters.

✅ Use Cases:
✔ Numbering steps in a tutorial or guide
✔ Ranking items (e.g., Top 10 lists)
✔ Creating outlines and to-do lists

Basic Syntax of ol

The <ol> tag creates an ordered list, and each item is wrapped in <li> (list item) tags.

✅ Example:

 
<ol>
    <li>Wake up</li>
    <li>Brush teeth</li>
    <li>Eat breakfast</li>
</ol>

✅ Output:

  1. Wake up
  2. Brush teeth
  3. Eat breakfast

Changing Numbering Styles

You can change the numbering style using the type attribute or CSS.

3.1 Using the type Attribute

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

✅ Output:
A. First
B. Second
C. Third

✔ Available type values:

  • "1" → 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)

Nested Ordered Lists (Sub-lists)

You can create multi-level lists by nesting <ol> inside <li>.

✅ Example:

<ol>
    <li>Morning Routine
        <ol type="a">
            <li>Wake up</li>
            <li>Shower</li>
        </ol>
    </li>
    <li>Work Tasks
        <ol type="i">
            <li>Check emails</li>
            <li>Attend meetings</li>
        </ol>
    </li>
</ol>

✅ Output:

  1. Morning Routine
    a. Wake up
    b. Shower
  2. Work Tasks
    i. Check emails
    ii. Attend meetings

Reversing Order (reversed Attribute)

Use reversed to display the list in descending order.

✅ Example:

<ol reversed>
    <li>Complete project</li>
    <li>Submit report</li>
    <li>Get approval</li>
</ol>

✅ Output:
3. Complete project
2. Submit report

  1. Get approval

Customizing Lists with CSS

Changing List Style Using list-style-type

Instead of using the type attribute, CSS provides more control over styles.

<ol style="list-style-type: lower-roman;">
    <li>Item One</li>
    <li>Item Two</li>
</ol>

✅ Output:
i. Item One
ii. Item Two

✔ Other list-style-type values:

  • decimal → Default (1, 2, 3)
  • decimal-leading-zero → 01, 02, 03
  • lower-greek → α, β, γ

Best Practices for Using ol

✔ Use ordered lists for steps and rankings.
✔ Avoid using <ol> for unordered data.
✔ Keep list items short and clear.
✔ Use CSS for styling rather than deprecated attributes.