← Back to All Tags

<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

The <ol> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

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

<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

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:

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

Top 3 Winners (Reversed):

  1. Bronze Medal - Third Place
  2. Silver Medal - Second Place
  3. Gold Medal - First Place

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