Ordered Lists (<ol>) — HTML

Ordered Lists

An ordered list (<ol>) is for content where sequence matters — step-by-step instructions, rankings, a table of contents. Browsers number each <li> automatically, and three attributes — start, reversed, and type — give you control over that numbering.

Basic Syntax

ol-basic.html

HTML

<ol>
  <li>Preheat the oven to 200°C.</li>
  <li>Mix the dry ingredients.</li>
  <li>Fold in the wet ingredients.</li>
  <li>Bake for 25 minutes.</li>
</ol>

Renders as a numbered list, 1. through 4., in document order — the browser assigns the numbers, you don't type them.

The start Attribute

start sets the number the list begins counting from, instead of 1. Useful when continuing a list that was split by other content.

ol-start.html

HTML

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

The reversed Attribute

reversed is a boolean attribute that makes the list count down instead of up — handy for countdowns or "top 10" style rankings where item order in the source still reads naturally top-to-bottom.

ol-reversed.html

HTML

<ol reversed>
  <li>Gold medal contender</li>
  <li>Silver medal contender</li>
  <li>Bronze medal contender</li>
</ol>

This renders as 3., 2., 1. — the source order stays natural (best to worst) while the visible numbers count down.

The type Attribute — Numbering Systems

type changes the style of marker used, without changing the underlying numeric value.

type value	Renders as
`1` (default)	1, 2, 3, ...
`a`	a, b, c, ...
`A`	A, B, C, ...
`i`	i, ii, iii, ...
`I`	I, II, III, ...

ol-type.html

HTML

<ol type="A">
  <li>Section A</li>
  <li>Section B</li>
  <li>Section C</li>
</ol>

<ol type="i">
  <li>Introduction</li>
  <li>Background</li>
  <li>Methodology</li>
</ol>

value on individual items

You can also override the number of a single <li> with its ownvalue attribute, which affects that item and all following items — covered in depth in the list-items tutorial.

Combining Attributes

ol-combined.html

HTML

<ol start="10" reversed type="I">
  <li>Tenth place</li>
  <li>Ninth place</li>
  <li>Eighth place</li>
</ol>

Semantic Use — Order Matters

Good <ol> candidates: recipe steps, installation instructions, race results, a legal document's numbered clauses.
If reordering the items would change the meaning or break the instructions, it belongs in <ol>, not <ul>.

Quick Reference

Attribute	Effect
`start="n"`	Begin counting from n instead of 1
`reversed`	Count down instead of up (boolean attribute)
`type="a\|A\|i\|I\|1"`	Change marker style (letters, Roman numerals, numbers)

type vs CSS list-style-type

The HTML `type` attribute and the CSS `list-style-type` property overlap in what they can do. Prefer the CSS property for pure styling; the HTML attribute is a legacy but still valid and well-supported option, and can be handy when numbering is core to the content's meaning (e.g. legal outlines).