04. Ordered Lists

Introduction

Ordered lists (<ol>) display items in a numbered sequence, indicating a specific order or sequence. They’re used for step-by-step instructions, rankings, sequential processes, and any content where order matters. Ordered lists are rendered with numbers by default.

Basic Syntax

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

Common Use Cases

Step-by-Step Instructions

<ol>
    <li>Open the application</li>
    <li>Click the settings button</li>
    <li>Configure your preferences</li>
</ol>

Rankings

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

Attributes

type

Change numbering style:

<ol type="A">
    <li>Item A</li>
    <li>Item B</li>
</ol>

<ol type="i">
    <li>Item i</li>
    <li>Item ii</li>
</ol>

start

Start from specific number:

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

reversed

Reverse numbering:

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

References

• MDN Web Docs - ol element