References

Beginner-friendly references for web development, with live, editable examples.

The HTML <ol> tag

Q: What is the difference between ol and ul?

Use when the order is meaningful and a when it is not.

Q: How do I change the starting number of an ordered list?

Set the start attribute, e.g. begins at 5.

Q: How do I use letters or Roman numerals instead of numbers?

Use the type attribute — type="a" for letters, type="i" for lowercase Roman numerals, and so on.

Element All modern browsers Updated June 22, 2026

Quick answer

The HTML <ol> element represents an ordered list — a list whose item order is meaningful, numbered by default. Control numbering with start, reversed and type; its children are <li> elements.

Overview

The <ol> (ordered list) element is for items whose sequence matters — steps in a recipe, ranked results, instructions to follow in order. Browsers number the <li> items automatically, so you never hand-type the numbers.

You can tune the numbering: start sets the first number, reversed counts downward (handy for a top-ten countdown), type switches between numbers, letters and Roman numerals, and a value on an individual <li> overrides its number with the rest continuing from there.

The semantic distinction from <ul> matters: use <ol> when reordering the items would change their meaning, and a <ul> when it would not. Style the markers (or hide them) with the CSS list-style property.

Syntax

<ol>
  <li>Preheat the oven</li>
  <li>Mix the ingredients</li>
  <li>Bake for 20 minutes</li>
</ol>

Attributes

The <ol> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute	Value	Description
`reversed`	A boolean attribute — present or absent.	Counts an ordered list downwards.
`start`	An integer.	Sets the start number of an ordered list.
`type`	`1 (numbers, default)` `a (lowercase letters)` `A (uppercase letters)` `i (lowercase Roman)` `I (uppercase Roman)`	Sets the marker style of an ordered list.

Example

Live example

<ol>
  <li>Wake up</li>
  <li>Write code</li>
  <li>Ship it</li>
</ol>

Best practices

Use <ol> only when the order of items is meaningful.
Let the browser number the items — never hand-type the numbers.
Tune the sequence with start, reversed and type instead of faking it.
Style or hide the markers with the CSS list-style property.

Frequently asked questions

What is the ol element?

An ordered list for items whose sequence matters, with automatic numbering of its <li> items.

What is the difference between ol and ul?

Use <ol> when the order is meaningful and a <ul> when it is not.

How do I change the starting number of an ordered list?

Set the start attribute, e.g. <ol start="5"> begins at 5.

How do I use letters or Roman numerals instead of numbers?

Use the type attribute — type="a" for letters, type="i" for lowercase Roman numerals, and so on.

object optgroup