ol

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.

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 groups of action buttons — use <menu>
• For tabular data — use <table>

Default

Standard ordered list with decimal numbering.

Numbering Styles

Use the type attribute to change the numbering style.

Start, Reversed, and Value

Control numbering with the start, reversed, and value attributes.

Variants

.inline

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

.unstyled

Remove numbers and indentation for custom styling.

Nested Lists

Ordered lists can be nested, and can mix with unordered lists for complex hierarchical content.

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

CSS Properties

Variant: .inline

Related

• <ul> — Unordered list for non-sequential items
• <li> — List item element (required child)
• <dl> — Definition list for term-description pairs
• <menu> — Semantic container for action button groups

Patterns Using This Element

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