The <ol> element creates a numbered list — used when the order of items genuinely matters to their meaning.
Syntax
<ol>
<li>First item</li>
<li>Second item</li>
</ol>Basic Example
<h2>How to Enroll</h2>
<ol>
<li>Choose a course</li>
<li>Book a free demo class</li>
<li>Complete your registration</li>
</ol>Browser output: "1. Choose a course", "2. Book a free demo class", "3. Complete your registration" — numbers generated automatically by the browser, never typed manually.
How It Works
The browser numbers each <li> automatically, starting at 1 by default. Adding or removing an item automatically renumbers every item after it — one of the real advantages of using <ol> over manually typed numbers.
Important Attributes
| Attribute | Purpose |
|---|---|
start | Sets the starting number (e.g. start="5" begins counting at 5) |
reversed | Counts downward instead of upward |
type | Changes the marker style — 1 (default), A, a, I, i |
Real-World Example
<h2>Top 3 Reasons Students Choose CodingNow</h2>
<ol>
<li>Live, mentor-led classes — not pre-recorded videos</li>
<li>Real projects, not just quizzes</li>
<li>Dedicated placement support</li>
</ol>A ranked "top 3" list is a genuine <ol> use case — the numbering itself communicates something (rank), which a bulleted list wouldn't.
Comparison: ol vs ul
<ol> | <ul> | |
|---|---|---|
| Marker | Numbers (or letters/roman numerals) | Bullets |
| Order matters? | Yes — the sequence is part of the meaning | No — items could be reordered with no meaning lost |
| Example | Recipe steps, race results, installation instructions | Feature lists, ingredient lists, navigation links |
Full breakdown: unordered-list.
Common Mistakes
- Using
<ol>for content where order genuinely doesn't matter, just because numbers "look official" - Manually typing "1.", "2.", "3." as plain text inside a
<ul>instead of using a real<ol>
Best Practices
- Reserve
<ol>for genuinely sequential content — steps, rankings, instructions - Let the browser generate the numbers automatically rather than typing them by hand
Accessibility Considerations
Screen readers announce both the list's scope ("list, 3 items") and each item's position ("item 2 of 3"), giving sequential context that a plain paragraph or bulleted list can't provide.
SEO Considerations
Numbered steps in real <ol> markup are a strong candidate for "how to" featured snippets in search results.
Browser & Modern HTML Notes
The type attribute (for roman numerals, letters) is technically presentational and can also be achieved via CSS list-style-type — either approach is valid, though CSS is generally preferred for pure styling changes.
Mini Practice
- Write a 4-step ordered list explaining how to make tea or coffee.
- Build an ordered list that starts counting from 10 using the
startattribute.
