**`<ol>`** numbers its `<li>` children automatically, and — unlike `<ul>` — the numbering carries real meaning: steps in a process, rankings, or anything where position matters. Useful attributes include **`start`** (the number to begin counting from), **`reversed`** (counts down instead of up), and **`type`** (switches between `1`, `a`, `A`, `i`, `I` numbering styles).
1Understanding <ol>
`<ol>` numbers its <li> children automatically, and — unlike <ul> — the numbering carries real meaning: steps in a process, rankings, or anything where position matters. Useful attributes include `start` (the number to begin counting from), `reversed` (counts down instead of up), and `type` (switches between 1, a, A, i, I numbering styles).
You can override an individual item's number with the value attribute on a specific <li> (e.g. <li value="5">) — later items continue counting from that new number.
<ol>
<li>Sign up for an account</li>
<li>Verify your email</li>
<li>Complete your profile</li>
</ol>2Practical Example
Here is a real-world application of <ol> showing how it is used in production HTML.
<!-- Countdown list starting at 3 -->
<ol start="3" reversed>
<li>Third place</li>
<li>Second place</li>
<li>First place</li>
</ol>3Best Practices
Follow these guidelines when working with <ol>:
1. Use <ol> whenever the sequence/order of items is meaningful (steps, rankings)
2. Use start or reversed instead of manually typing numbers into the text
3. Use type="a" or type="i" for lettered/roman-numeral lists instead of styling numbers manually
Tip: You can override an individual item's number with the value attribute on a specific <li> (e.g. <li value="5">) — later items continue counting from that new number.
<ol>
<li>Sign up for an account</li>
<li>Verify your email</li>
<li>Complete your profile</li>
</ol>