<ol>: The OL Element

Last updated: 2026-10-13

<ol>The OL Element

The <ol> (ordered list) element defines a numbered list. The type attribute switches numbering style, start sets the starting value, and reversed reverses the order.

Category	Lists
Content Model	Zero or more <li>, script-supporting elements
Allowed Parents	Any element that accepts flow content
Content Tag	Yes — requires closing `</ol>` tag
Status	Standard

📝 Syntax

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

⚙️ Attributes

This element supports the global attributes plus the following:

Attribute	Value	Description
`type`	Keyword	The numbering style. `1` — Decimal numbers (default). `a` — Lowercase letters. `A` — Uppercase letters. `i` — Lowercase Roman numerals. `I` — Uppercase Roman numerals.
`start`	Number	The starting number of the list. Default: `1`
`reversed`	Boolean	Number in reverse (descending).

See all global attributes → See all event attributes →

▶ Example

Edit the code below and see the live result in the playground:

▶ Try it

🌐 Browser Support

Browser	Chrome	Edge	Firefox	Safari	Opera
<ol>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
Supported in all major browsers

❓ FAQ

QHow do I choose between ol and ul?

AUse <ol> when order matters (steps, rankings, processes) and <ul> for unordered items (checklists, navigation, tags). Quick test: does shuffling the items change the meaning? If yes, use <ol>. CSS can restyle both markers, so choose by semantics, not appearance.

QHow do ol's start and reversed attributes work?

Astart='3' begins numbering at 3 (continuing an interrupted list); reversed counts down (a Top 10 list from 10 to 1). They can combine — with reversed, start is the largest number.

QCan I customize the numbering style of ol?

AYes: CSS list-style-type offers decimal, lower-roman, cjk-ideographic and more; for full control use li::marker or a ::before pseudo-element to style the numbers (color, font, brackets).

<ol> — lists tutorial

📚 Related Tutorials

HTML Lists

HTML Lists Tutorial

Learn ordered, unordered and description lists.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us