Ordered Lists
Create a numbered list with ol and li.
Syntax
<ol><li>Step one</li></ol>An ordered list displays items with numbers. Use the <ol> element with <li> items.
When to use
Use an ordered list when the sequence matters, such as steps in a recipe or ranking.
You can change the starting number with the start attribute and the numbering style with type.
Example
Loading editor…
Press Run to see the result.
When to use it
- A step-by-step installation guide uses <ol> so readers understand the steps must be followed in sequence.
- A recipe uses <ol> for the cooking steps because order directly affects the result.
- A ranking page uses <ol> to display top 10 results where position number communicates meaning.
More examples
Basic ordered list
Items in <ol> are automatically numbered in order; sequence is implied and important.
<ol>
<li>Install Node.js</li>
<li>Run npm install</li>
<li>Start the server with npm start</li>
</ol>Ordered list starting from a custom number
The start attribute lets you begin numbering from any integer, useful when a list spans multiple sections.
<p>Continuing from step 3:</p>
<ol start="4">
<li>Configure the database connection.</li>
<li>Run migrations.</li>
<li>Deploy to production.</li>
</ol>Reversed ordered list for countdown
The reversed attribute counts down from the total number to 1, suitable for countdowns and rankings.
<h3>Top 3 Courses</h3>
<ol reversed>
<li>JavaScript Mastery</li>
<li>CSS Deep Dive</li>
<li>HTML Fundamentals</li>
</ol>
Discussion