ol

The ordered list element represents a collection of items where the sequence is meaningful.

Description

The <ol> element creates a numbered list of items. Each item is wrapped in an <li> element. Use ordered lists when the sequence of items matters - such as steps in a process, rankings, or any content where position is significant.

By default, items are numbered with decimal numerals (1, 2, 3...) and have left padding for indentation.

Semantic Meaning

An ordered list conveys that:

  • The content is a collection of related items
  • The order of items is significant
  • Rearranging items would change the meaning
  • Items have a natural sequence or ranking

Screen readers announce the list, item count, and each item's position, helping users understand the sequential nature of the content.

When to Use

  • Step-by-step instructions or tutorials
  • Recipes with sequential steps
  • Rankings or leaderboards
  • Table of contents
  • Legal document sections
  • Any content where position matters

When Not to Use

  • For unordered collections - use <ul>
  • For term-definition pairs - use <dl>
  • For tabular data - use <table>

Default

Standard ordered list with decimal numbering.

  1. First step in the process
  2. Second step in the process
  3. Third step in the process
  4. Fourth step in the process
<ol> <li>First step in the process</li> <li>Second step in the process</li> <li>Third step in the process</li> <li>Fourth step in the process</li> </ol>

Numbering Styles

Use the type attribute to change the numbering style.

Uppercase Letters (type="A")

  1. First item
  2. Second item
  3. Third item
<ol type="A"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>

Lowercase Letters (type="a")

  1. First item
  2. Second item
  3. Third item

Roman Numerals (type="I")

  1. First item
  2. Second item
  3. Third item

Lowercase Roman Numerals (type="i")

  1. First item
  2. Second item
  3. Third item
Type Value Numbering Style Example
1 (default) Decimal numbers 1, 2, 3...
A Uppercase letters A, B, C...
a Lowercase letters a, b, c...
I Uppercase Roman I, II, III...
i Lowercase Roman i, ii, iii...

Start and Reversed

Custom Start Value

Use the start attribute to begin numbering from a specific value.

  1. This is item 5
  2. This is item 6
  3. This is item 7
<ol start="5"> <li>This is item 5</li> <li>This is item 6</li> <li>This is item 7</li> </ol>

Reversed Order

Use the reversed attribute for countdown lists.

  1. Bronze medal
  2. Silver medal
  3. Gold medal
<ol reversed> <li>Bronze medal</li> <li>Silver medal</li> <li>Gold medal</li> </ol>

Combined Attributes

Combine start, reversed, and type for complex numbering.

  1. Countdown from X
  2. Item IX
  3. Item VIII
<ol type="I" start="10" reversed> <li>Countdown from X</li> <li>Item IX</li> <li>Item VIII</li> </ol>

Variants

.inline

Display list items horizontally. Numbers are removed in this variant.

  1. Step 1
  2. Step 2
  3. Step 3
  4. Step 4
<ol class="inline"> <li>Step 1</li> <li>Step 2</li> <li>Step 3</li> <li>Step 4</li> </ol>

.unstyled

Remove numbers and indentation for custom styling.

  1. First item (no number)
  2. Second item (no number)
  3. Third item (no number)
<ol class="unstyled"> <li>First item (no number)</li> <li>Second item (no number)</li> <li>Third item (no number)</li> </ol>

Nested Lists

Ordered lists can be nested to create hierarchical numbered structures.

  1. Main section one
    1. Sub-section one
    2. Sub-section two
  2. Main section two
    1. Sub-section one
    2. Sub-section two
    3. Sub-section three
  3. Main section three

Mixed Nesting

Combine ordered and unordered lists for complex content structures.

  1. Gather ingredients
    • Flour
    • Sugar
    • Eggs
  2. Mix dry ingredients
  3. Add wet ingredients
  4. Bake at 350F
<ol> <li>Gather ingredients <ul> <li>Flour</li> <li>Sugar</li> <li>Eggs</li> </ul> </li> <li>Mix dry ingredients</li> <li>Add wet ingredients</li> <li>Bake at 350F</li> </ol>

Accessibility

Screen Reader Behavior

  • Announced as "list" with item count
  • Each item announced with its number and position
  • The reversed attribute is reflected in announced numbers
  • Custom start values are properly announced

Best Practices

  • Use ordered lists only when sequence matters
  • Keep step counts reasonable (avoid 50+ step lists)
  • Consider breaking very long lists into sections
  • Use type attribute for legal/academic numbering styles
  • The value attribute on <li> can override individual item numbers

Individual Item Values

Override specific item numbers with the value attribute on <li>.

  1. Item 1
  2. Jumps to 5
  3. Continues from 6
<ol> <li>Item 1</li> <li value="5">Jumps to 5</li> <li>Continues from 6</li> </ol>

CSS Properties

Property Value Description
padding-inline-start var(--size-l) Left indentation for list items

Variant: .inline

Property Value
display flex
flex-wrap wrap
gap var(--size-s)
list-style none

Attributes Summary

Attribute Values Description
type 1, A, a, I, i Numbering style
start Integer Starting number
reversed Boolean Count down instead of up

Related Elements

  • <ul> - Unordered list for non-sequential items
  • <li> - List item element (required child)
  • <dl> - Definition list for term-description pairs

Patterns Using This Element

The <ol> element serves as the semantic foundation for these patterns:

Timeline

Chronological events, order tracking, and activity feeds