<ol> - Ordered List

The `<ol>` Element

Block-level HTML 2.0

The <ol> element represents an ordered list of items, where the sequence is meaningful. Items are typically numbered automatically, making it perfect for steps, rankings, or any content where order matters.

Quick Example

<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>

Syntax

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

The <ol> element contains one or more <li> (list item) elements, which are automatically numbered.

Attributes

type Attribute

Specifies the numbering style:

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

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

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

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

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

Result

Interactive code playground requires JavaScript. Here's the code:

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

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

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

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

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

start Attribute

Specifies the starting number:

<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
</ol>

reversed Attribute

Reverses the numbering order:

<h3>Top 5 Programming Languages</h3>
<ol reversed>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>JavaScript</li>
<li>TypeScript</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Top 5 Programming Languages</h3>
<ol reversed>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>JavaScript</li>
<li>TypeScript</li>
</ol>

Global Attributes

The <ol> element supports all global attributes like id, class, and style.

Common Use Cases

Step-by-Step Instructions

<h3>How to Make Coffee</h3>
<ol>
<li>Boil water</li>
<li>Grind coffee beans</li>
<li>Add coffee to filter</li>
<li>Pour hot water over coffee</li>
<li>Wait 4 minutes</li>
<li>Enjoy your coffee</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>How to Make Coffee</h3>
<ol>
<li>Boil water</li>
<li>Grind coffee beans</li>
<li>Add coffee to filter</li>
<li>Pour hot water over coffee</li>
<li>Wait 4 minutes</li>
<li>Enjoy your coffee</li>
</ol>

Rankings or Top Lists

<h3>Best Selling Products</h3>
<ol>
<li>Premium Widget - 10,000 sold</li>
<li>Standard Widget - 7,500 sold</li>
<li>Basic Widget - 5,000 sold</li>
<li>Economy Widget - 3,200 sold</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Best Selling Products</h3>
<ol>
<li>Premium Widget - 10,000 sold</li>
<li>Standard Widget - 7,500 sold</li>
<li>Basic Widget - 5,000 sold</li>
<li>Economy Widget - 3,200 sold</li>
</ol>

Tutorial Steps

<h3>Getting Started Guide</h3>
<ol>
<li>Create an account</li>
<li>Verify your email</li>
<li>Complete your profile</li>
<li>Choose a plan</li>
<li>Start using the service</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Getting Started Guide</h3>
<ol>
<li>Create an account</li>
<li>Verify your email</li>
<li>Complete your profile</li>
<li>Choose a plan</li>
<li>Start using the service</li>
</ol>

Recipe Instructions

<h3>Chocolate Chip Cookies</h3>
<ol>
<li>Preheat oven to 350°F (175°C)</li>
<li>Mix butter and sugars until creamy</li>
<li>Beat in eggs and vanilla</li>
<li>Combine flour, baking soda, and salt</li>
<li>Stir in chocolate chips</li>
<li>Bake for 10-12 minutes</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Chocolate Chip Cookies</h3>
<ol>
<li>Preheat oven to 350°F (175°C)</li>
<li>Mix butter and sugars until creamy</li>
<li>Beat in eggs and vanilla</li>
<li>Combine flour, baking soda, and salt</li>
<li>Stir in chocolate chips</li>
<li>Bake for 10-12 minutes</li>
</ol>

Styling Ordered Lists

Custom Number Styling

<style>
.custom-numbers {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
}
.custom-numbers li {
  counter-increment: item;
  padding-left: 2.5rem;
  position: relative;
  margin-bottom: 0.75rem;
}
.custom-numbers li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  width: 2rem;
  height: 2rem;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
</style>

<ol class="custom-numbers">
<li>First step with custom number</li>
<li>Second step with custom number</li>
<li>Third step with custom number</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.custom-numbers {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
}
.custom-numbers li {
  counter-increment: item;
  padding-left: 2.5rem;
  position: relative;
  margin-bottom: 0.75rem;
}
.custom-numbers li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  width: 2rem;
  height: 2rem;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
</style>

<ol class="custom-numbers">
<li>First step with custom number</li>
<li>Second step with custom number</li>
<li>Third step with custom number</li>
</ol>

Colored Numbers

<style>
.colored-numbers {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
}
.colored-numbers li {
  counter-increment: step;
  padding-left: 3rem;
  position: relative;
  margin-bottom: 1rem;
}
.colored-numbers li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
</style>

<ol class="colored-numbers">
<li>Download the application</li>
<li>Install on your device</li>
<li>Create an account</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.colored-numbers {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
}
.colored-numbers li {
  counter-increment: step;
  padding-left: 3rem;
  position: relative;
  margin-bottom: 1rem;
}
.colored-numbers li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
</style>

<ol class="colored-numbers">
<li>Download the application</li>
<li>Install on your device</li>
<li>Create an account</li>
</ol>

Styled List Items

<style>
.styled-ol {
  padding-left: 2rem;
}
.styled-ol li {
  background: #f3f4f6;
  margin-bottom: 0.75rem;
  padding: 1rem;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}
.styled-ol li::marker {
  color: #3b82f6;
  font-weight: bold;
}
</style>

<ol class="styled-ol">
<li>Configure your settings</li>
<li>Connect your accounts</li>
<li>Start automating</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.styled-ol {
  padding-left: 2rem;
}
.styled-ol li {
  background: #f3f4f6;
  margin-bottom: 0.75rem;
  padding: 1rem;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}
.styled-ol li::marker {
  color: #3b82f6;
  font-weight: bold;
}
</style>

<ol class="styled-ol">
<li>Configure your settings</li>
<li>Connect your accounts</li>
<li>Start automating</li>
</ol>

Nested Ordered Lists

Multi-Level Instructions

<h3>Installation Process</h3>
<ol>
<li>Prepare your system
  <ol>
    <li>Update your OS</li>
    <li>Install prerequisites</li>
    <li>Create backup</li>
  </ol>
</li>
<li>Install software
  <ol>
    <li>Download installer</li>
    <li>Run setup wizard</li>
    <li>Configure options</li>
  </ol>
</li>
<li>Verify installation
  <ol>
    <li>Run test command</li>
    <li>Check version</li>
  </ol>
</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Installation Process</h3>
<ol>
<li>Prepare your system
  <ol>
    <li>Update your OS</li>
    <li>Install prerequisites</li>
    <li>Create backup</li>
  </ol>
</li>
<li>Install software
  <ol>
    <li>Download installer</li>
    <li>Run setup wizard</li>
    <li>Configure options</li>
  </ol>
</li>
<li>Verify installation
  <ol>
    <li>Run test command</li>
    <li>Check version</li>
  </ol>
</li>
</ol>

Different Numbering Styles

<ol type="I">
<li>Introduction
  <ol type="A">
    <li>Background</li>
    <li>Objectives
      <ol type="1">
        <li>Primary goal</li>
        <li>Secondary goals</li>
      </ol>
    </li>
  </ol>
</li>
<li>Methodology
  <ol type="A">
    <li>Research methods</li>
    <li>Data collection</li>
  </ol>
</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<ol type="I">
<li>Introduction
  <ol type="A">
    <li>Background</li>
    <li>Objectives
      <ol type="1">
        <li>Primary goal</li>
        <li>Secondary goals</li>
      </ol>
    </li>
  </ol>
</li>
<li>Methodology
  <ol type="A">
    <li>Research methods</li>
    <li>Data collection</li>
  </ol>
</li>
</ol>

Advanced Features

Starting from Specific Number

<h3>Chapter 1</h3>
<ol>
<li>First section</li>
<li>Second section</li>
</ol>

<h3>Chapter 2 (continued numbering)</h3>
<ol start="3">
<li>Third section</li>
<li>Fourth section</li>
<li>Fifth section</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Chapter 1</h3>
<ol>
<li>First section</li>
<li>Second section</li>
</ol>

<h3>Chapter 2 (continued numbering)</h3>
<ol start="3">
<li>Third section</li>
<li>Fourth section</li>
<li>Fifth section</li>
</ol>

Reversed Countdown

<h3>Top 5 Features</h3>
<ol reversed>
<li>Great documentation</li>
<li>Active community</li>
<li>Easy to learn</li>
<li>Fast performance</li>
<li>Free and open source</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Top 5 Features</h3>
<ol reversed>
<li>Great documentation</li>
<li>Active community</li>
<li>Easy to learn</li>
<li>Fast performance</li>
<li>Free and open source</li>
</ol>

Custom Starting Value with Type

<ol type="a" start="4">
<li>Fourth item (d)</li>
<li>Fifth item (e)</li>
<li>Sixth item (f)</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<ol type="a" start="4">
<li>Fourth item (d)</li>
<li>Fifth item (e)</li>
<li>Sixth item (f)</li>
</ol>

Accessibility

Semantic Meaning

Screen readers announce ordered lists with numbers:

<!-- Screen reader: "List, 3 items. 1, First step. 2, Second step. 3, Third step." -->
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Clear Instructions

Make each step clear and actionable:

Good
Less Clear

<ol>
  <li>Click the "Download" button in the top right corner</li>
  <li>Open the downloaded file from your Downloads folder</li>
  <li>Follow the installation wizard prompts</li>
</ol>

<ol>
  <li>Download</li>
  <li>Open</li>
  <li>Install</li>
</ol>

Logical Order

Ensure steps follow a logical sequence:

<h3>Account Setup</h3>
<ol>
<li>Enter your email address</li>
<li>Create a strong password</li>
<li>Verify your email</li>
<li>Complete your profile</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Account Setup</h3>
<ol>
<li>Enter your email address</li>
<li>Create a strong password</li>
<li>Verify your email</li>
<li>Complete your profile</li>
</ol>

When to Use OL vs UL

Use OL When…

Order/sequence matters
Steps must be followed in order
Rankings or priorities exist
Numbering adds meaning

Use OL
Use UL

<h3>Recipe Steps</h3>
<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

<h3>Ingredients</h3>
<ul>
  <li>2 cups flour</li>
  <li>1 cup sugar</li>
  <li>3 eggs</li>
</ul>

Common Patterns

Progress Steps

<style>
.progress-steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.progress-steps li {
  counter-increment: step;
  padding: 1rem 1rem 1rem 3.5rem;
  position: relative;
  border-left: 2px solid #e5e7eb;
}
.progress-steps li::before {
  content: counter(step);
  position: absolute;
  left: -1rem;
  width: 2rem;
  height: 2rem;
  background: white;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  font-weight: bold;
}
.progress-steps li.completed::before {
  background: #3b82f6;
  color: white;
  content: "✓";
}
</style>

<ol class="progress-steps">
<li class="completed">Account created</li>
<li class="completed">Email verified</li>
<li>Profile setup</li>
<li>Start using</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.progress-steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.progress-steps li {
  counter-increment: step;
  padding: 1rem 1rem 1rem 3.5rem;
  position: relative;
  border-left: 2px solid #e5e7eb;
}
.progress-steps li::before {
  content: counter(step);
  position: absolute;
  left: -1rem;
  width: 2rem;
  height: 2rem;
  background: white;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  font-weight: bold;
}
.progress-steps li.completed::before {
  background: #3b82f6;
  color: white;
  content: "✓";
}
</style>

<ol class="progress-steps">
<li class="completed">Account created</li>
<li class="completed">Email verified</li>
<li>Profile setup</li>
<li>Start using</li>
</ol>

FAQ Numbering

<h3>Frequently Asked Questions</h3>
<ol>
<li><strong>How do I create an account?</strong><br>
    Click the "Sign Up" button and fill out the form.</li>

<li><strong>Is there a free trial?</strong><br>
    Yes, we offer a 14-day free trial.</li>

<li><strong>Can I cancel anytime?</strong><br>
    Yes, you can cancel without penalty.</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Frequently Asked Questions</h3>
<ol>
<li><strong>How do I create an account?</strong><br>
    Click the "Sign Up" button and fill out the form.</li>

<li><strong>Is there a free trial?</strong><br>
    Yes, we offer a 14-day free trial.</li>

<li><strong>Can I cancel anytime?</strong><br>
    Yes, you can cancel without penalty.</li>
</ol>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support, `reversed` since v18
Firefox	1+	Full support, `reversed` since v18
Safari	1+	Full support, `reversed` since v6
Edge	12+	Full support
IE	3+	Full support, no `reversed`

The <ol> element has been supported since early HTML. The reversed attribute is HTML5.

Unordered list for non-sequential items. Learn more →

List item element. Learn more →

Description list for term/definition pairs. Learn more →

Semantic list for commands or options. Learn more →

<ol> - Ordered List

The <ol> Element

Quick Example

Syntax

Attributes

type Attribute

start Attribute

reversed Attribute

Global Attributes

Common Use Cases

Step-by-Step Instructions

Rankings or Top Lists

Tutorial Steps

Recipe Instructions

Styling Ordered Lists

Custom Number Styling

Colored Numbers

Styled List Items

Nested Ordered Lists

Multi-Level Instructions

Different Numbering Styles

Advanced Features

Starting from Specific Number

Reversed Countdown

Custom Starting Value with Type

Accessibility

Semantic Meaning

Clear Instructions

Logical Order

When to Use OL vs UL

Use OL When…

Common Patterns

Progress Steps

FAQ Numbering

Browser Support

Related Elements

Specifications

The `<ol>` Element