`<ol>` Ordered list

Q: How do I start an ordered list at a different number?

Use the start attribute on the <ol> : <ol start="5"> begins at 5. To change a single item, put value on its <li> , and the items after it carry on from that number. Add reversed and the list counts down, which suits a top 10.

Q: How do I make a list with letters or Roman numerals?

Set type on the <ol> . a and A give letters, i and I give Roman numerals, and 1 gives plain numbers. Put this in the markup when the marker carries meaning, say a contract that refers to item (b). If the change is only cosmetic, use CSS list-style-type . Wikipedia's Roman numerals article explains the numbering system behind type="i".

Numbered list for sequences such as steps, directions or rankings.

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

<ol> is the list to use when position means something: recipe steps, driving directions, a top ten. The browser adds the numbers for you.

Three attributes change the numbering. start sets the first number, reversed counts down, and type switches to letters or Roman numerals. Do not type numbers into the items yourself, or each one shows up twice. Direct children must be <li> elements, same as in a ul.

See the ol element definition (opens in a new tab) for the rules on start, reversed and type. The Lists lesson teaches it alongside ul.

Syntax

<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

When to use it

Installation steps, a recipe method, driving directions, a top ten chart, the clauses of a contract. Swap two items in any of these and the meaning changes, so they go in an <ol>. A breadcrumb trail fits too, since each link goes one level deeper into the site.

Numbers that only look tidy on an arbitrary order belong in a ul. When each step needs a title and several paragraphs, keep the ol and put a heading and paragraphs inside each li. Very long guides may work better as headings with sections. Question-and-answer pairs are closer to a dl.

Watch out when a photo or a warning sits between steps 2 and 3. Split the sequence into two ol elements and the second one starts again at 1. Move the extra content inside an li, or give the second list start="3". Note that type changes the marker style only. Numbering like 1.1 and 1.2 needs CSS counters.

Attributes

Attribute	What it does
`start`	Number to start counting from, such as 5.
`reversed`	Counts down instead of up.
`type`	Numbering style: 1, a, A, i or I.

Live example

Edit the code and watch the preview.

<ol>
  <li>Mix the batter.</li>
  <li>Heat the pan.</li>
  <li>Fry until golden.</li>
</ol>
<ol type="A" start="3">
  <li>Third option</li>
  <li>Fourth option</li>
</ol>

More examples

Counting down with reversed

With the reversed attribute the browser counts down, handy for a chart that reveals the winner last. Nobody typed the 3, 2 and 1; the browser generates them.

<h3>Top 3 hiking trails</h3>
<ol reversed>
  <li>Lakeside Loop</li>
  <li>Pine Ridge</li>
  <li>Summit Path</li>
</ol>

Steps interrupted by a photo

This recipe puts a photo between two steps, which means two separate lists. The second ol has start="3", so the count carries on from where the first list stopped and readers see one sequence.

<ol>
  <li>Whisk the flour, milk and eggs.</li>
  <li>Rest the batter for 10 minutes.</li>
</ol>
<img src="pancakes.svg" alt="Batter poured into a hot pan" width="200" height="150">
<ol start="3">
  <li>Pour a ladle of batter into the pan.</li>
  <li>Flip when bubbles appear.</li>
</ol>

Tip: Leave the numbering to the browser. Typed numbers double up.

Browser support

All browsers support ol with its start and type attributes. reversed came later, and every current browser has it now (see the reversed attribute support table (opens in a new tab)). Many HTML 4 attributes are obsolete, but type on ol survived. In a legal document, for instance, the numbering style is part of the meaning.

Accessibility

For each item a screen reader reports its number and the list total, so mark up real sequences like steps as an ol. Numbers typed into paragraphs give users none of that. The W3C tutorial on content structure (opens in a new tab) shows lists in context.

Common mistakes

Wrong

<ol>
  <li>1. Preheat the oven</li>
  <li>2. Mix the flour</li>
</ol>

Right

<ol>
  <li>Preheat the oven</li>
  <li>Mix the flour</li>
</ol>

The browser already numbers ol items, so typed ones show twice.

Frequently asked questions

How do I start an ordered list at a different number?

Use the start attribute on the <ol>: <ol start="5"> begins at 5. To change a single item, put value on its <li>, and the items after it carry on from that number. Add reversed and the list counts down, which suits a top 10.

How do I make a list with letters or Roman numerals?

Set type on the <ol>. a and A give letters, i and I give Roman numerals, and 1 gives plain numbers. Put this in the markup when the marker carries meaning, say a contract that refers to item (b). If the change is only cosmetic, use CSS list-style-type. Wikipedia's Roman numerals (opens in a new tab) article explains the numbering system behind type="i".

Practise it

Lists (Module 2: Text)
Project: Recipe Card (Module 2: Text)
Full Recipe Page (Module 10: Final Projects)

Related lists elements

<ul>Bulleted list for items in no particular order.<li>A single item in a ul, ol or menu.<dl>Pairs of terms and descriptions, such as a glossary or a set of key-value data.<dt>A term, name or question in a dl.<dd>The definition, description or value that belongs to a term in a dl.<menu>A list of commands like toolbar buttons; browsers treat it as a ul.

<ol> Ordered list