🌱BeginnerLists
Ordered Lists
Create numbered sequences with <ol>, and customize numbering with type and start attributes.
Overview
An ordered list (<ol>) is used when the sequence of items matters like steps in a recipe, a ranked top-10 list, or a numbered set of instructions. Browsers render <ol> with sequential numbers by default (1, 2, 3...).
Like <ul>, each item is wrapped in an <li> element. The difference is semantics: <ol> communicates that order has meaning.
The type attribute changes the numbering style (1, A, a, I, i), and the start attribute sets the first number. The reversed attribute counts down instead of up.
Key Points
- •<ol> uses the same <li> children as <ul>, but implies order matters
- •Default numbering is 1, 2, 3... CSS list-style-type can change this
- •type attribute: "1" (numbers), "A" (uppercase), "a" (lowercase), "I" (Roman uppercase), "i" (Roman lowercase)
- •start="5" makes the list start numbering from 5
- •reversed attribute counts down: 10, 9, 8...
- •<li value="N"> overrides the number for a specific item
Examples
Basic ordered list step-by-step instructions
<ol>
<li>Preheat the oven to 180°C</li>
<li>Mix flour, sugar, and eggs</li>
<li>Pour batter into a greased tin</li>
<li>Bake for 30 minutes</li>
</ol>Alphabetical list with type="A"
<ol type="A">
<li>Introduction</li>
<li>Methods</li>
<li>Results</li>
<li>Conclusion</li>
</ol>Starting from a number other than 1
<p>Continuing from previous steps...</p>
<ol start="6">
<li>Deploy to staging</li>
<li>Run integration tests</li>
<li>Deploy to production</li>
</ol>Reversed countdown list
<h3>Top 3 Features</h3>
<ol reversed>
<li>Syntax highlighting</li>
<li>Auto-complete</li>
<li>Git integration</li>
</ol>This renders as: 3. Syntax... 2. Auto... 1. Git...
Common Mistakes
- Using <ol> when order doesn't matter use <ul> for unordered collections
- Using <ol> just to get numbers use CSS counter-increment for custom counting without semantic list meaning
- Forgetting that changing type="A" is purely visual the underlying value attribute still counts numerically
Note
When writing instructions, tutorials, or how-to guides, always use <ol>. The numbered list structure signals to screen readers and users that following the order is important.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4