<ol>

Creates numbered sequence lists

Definition and Usage

The <ol> element establishes an ordered list. An ordered list can be numerical or alphabetical.

The <li> tag is used to define each list item.

Use ordered lists when the sequence or order of items matters:

Step-by-step instructions
Rankings or top lists
Numbered procedures
Sequential processes
Chronological events

Tip: Use the <ul> tag to create unordered lists when the order doesn't matter.

Tip: Use CSS to style lists with different marker types, colors, and layouts.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

Attribute	Value	Description
type	1 a A i I	Specifies the kind of marker to use in the list (1=numbers, a=lowercase letters, A=uppercase letters, i=lowercase roman, I=uppercase roman)
start	number	Specifies the start value of an ordered list
reversed	reversed	Specifies that the list order should be reversed (descending)
compact	compact	Deprecated in HTML5. Use CSS instead to reduce spacing

Examples

Default Ordered List

Create a simple numbered list:

Example
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Different Numbering Types

Use the type attribute to change numbering style:

Example
<!-- Numbers (default) -->
<ol type="1">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

<!-- Lowercase letters -->
<ol type="a">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

<!-- Uppercase letters -->
<ol type="A">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

<!-- Lowercase Roman numerals -->
<ol type="i">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

<!-- Uppercase Roman numerals -->
<ol type="I">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Custom Start Value

Start numbering from a specific value:

Example
<ol start="5">
  <li>This is item number 5</li>
  <li>This is item number 6</li>
  <li>This is item number 7</li>
</ol>

Reversed List

Create a countdown or descending list:

Example
<ol reversed>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>

Nested Ordered Lists

Create multi-level lists:

Example
<ol>
  <li
    >Main topic 1
    <ol type="a">
      <li>Subtopic 1.1</li>
      <li>Subtopic 1.2</li>
    </ol>
  </li>
  <li
    >Main topic 2
    <ol type="a">
      <li>Subtopic 2.1</li>
      <li>Subtopic 2.2</li>
    </ol>
  </li>
</ol>

Styled Lists with CSS

Customize list appearance with CSS:

Example

Approved-page light CSS-variable defaults are supplied: --text-primary. The snippet includes CSS inside its HTML.

<style>
  .custom-list {
    background: #f4f4f4;
    padding: 20px 20px 20px 40px;
    border-radius: 8px;
    border-left: 4px solid #745af2;
  }

  .custom-list li {
    padding: 8px 0;
    color: var(--text-primary);
  }

  .custom-list li::marker {
    color: #745af2;
    font-weight: bold;
  }
</style>

<ol class="custom-list">
  <li>Styled list item 1</li>
  <li>Styled list item 2</li>
  <li>Styled list item 3</li>
</ol>

List Style Types

CSS provides additional list-style-type options:

Value	Description	Example
`decimal`	Numbers (default)	1, 2, 3, 4, 5
`decimal-leading-zero`	Numbers with leading zeros	01, 02, 03, 04, 05
`lower-alpha`	Lowercase letters	a, b, c, d, e
`upper-alpha`	Uppercase letters	A, B, C, D, E
`lower-roman`	Lowercase Roman numerals	i, ii, iii, iv, v
`upper-roman`	Uppercase Roman numerals	I, II, III, IV, V
`lower-greek`	Lowercase Greek letters	α, β, γ, δ, ε

CSS Example

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

ol {
  list-style-type: upper-roman;
}

Ordered vs Unordered Lists

Feature	<ol> (Ordered)	<ul> (Unordered)
Default Marker	Numbers (1, 2, 3...)	Bullets (•)
When to Use	When sequence matters	When sequence doesn't matter
Examples	Instructions, rankings, steps	Features, lists, menu items
Type Attribute	1, a, A, i, I	disc, circle, square
Start Attribute	Yes	No
Reversed Attribute	Yes	No

Try it Yourself

Interactive Example

Here's a live example of different ordered list types:

Recipe Steps:

Preheat oven to 350°F (175°C)
Mix dry ingredients in a bowl
Add wet ingredients and stir
Pour into baking pan
Bake for 30-35 minutes

Top 3 Winners (Reversed):

Bronze Medal - Third Place
Silver Medal - Second Place
Gold Medal - First Place

Try in Code Playground

Best Practices

Use ordered lists when the sequence or order matters
Choose the appropriate numbering type (numbers, letters, or Roman numerals)
Use the start attribute to continue numbering from a previous list
Keep list items concise and scannable
Use nested lists for hierarchical information
Ensure proper accessibility by using semantic <ol> tags
Combine with CSS for custom styling while maintaining semantic meaning
Don't use lists purely for indentation (use CSS instead)

Accessibility Considerations

Screen readers announce the number of items in the list
Screen readers announce the current item number while navigating
Use ordered lists when the order provides meaning to users
Ensure list items contain meaningful content
Nested lists are properly announced with their depth level

Default CSS Settings

Most browsers will display the <ol> element with the following default values:

Default CSS

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Related Tags

<ul>
Defines an unordered list
<li>
Defines a list item
<dl>
Defines a description list
<dt>
Defines a term in a description list
<dd>
Defines a description in a list
<nav>
Defines navigation links