HTML Ordered Lists Guide

Learn how to create and style ordered lists in HTML

What are Ordered Lists?

Ordered lists (<ol>) in HTML are used to present items in a specific sequence where the order matters. Each item in the list is automatically numbered by the browser, making them ideal for:

Step-by-step instructions or recipes
Sequential processes or workflows
Ranked items or prioritized tasks
Academic outlines or legal documents
Any content where numerical order is important

Key Features:

Automatic numbering that adjusts when items are added/removed
Multiple numbering styles (numbers, letters, Roman numerals)
Customizable starting numbers
Ability to nest lists within lists
Full CSS styling capabilities

Basic Ordered List

Simple numbered list with default styling

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

Usage: For sequential information where order matters

List with Custom Start

List starting from a specific number

<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>

Usage: When continuing a list from a previous point

Reversed List

List numbered in descending order

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

Usage: For countdowns or reverse-chronological order

List with Value Attributes

Manually setting item numbers

<ol>
  <li value="10">Item 10</li>
  <li>Item 11</li>
  <li value="20">Item 20</li>
  <li>Item 21</li>
</ol>

Usage: For non-sequential or special numbering

Number Type (1, 2, 3)

Default decimal numbering

<ol type="1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol><ol type="1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Note: This is the default type if none specified

Uppercase Letters (A, B, C)

Alphabetical numbering with uppercase letters

<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol><ol type="A">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

Note: Starts from 'A' unless start attribute is used

Lowercase Letters (a, b, c)

Alphabetical numbering with lowercase letters

<ol type="a">
  <li>Item a</li>
  <li>Item b</li>
  <li>Item c</li>
</ol><ol type="a">
  <li>Item a</li>
  <li>Item b</li>
  <li>Item c</li>
</ol>

Note: Starts from 'a' unless start attribute is used

Uppercase Roman (I, II, III)

Roman numeral numbering in uppercase

<ol type="I">
  <li>Item I</li>
  <li>Item II</li>
  <li>Item III</li>
</ol><ol type="I">
  <li>Item I</li>
  <li>Item II</li>
  <li>Item III</li>
</ol>

Note: Commonly used for outlines or book chapters

Lowercase Roman (i, ii, iii)

Roman numeral numbering in lowercase

<ol type="i">
  <li>Item i</li>
  <li>Item ii</li>
  <li>Item iii</li>
</ol><ol type="i">
  <li>Item i</li>
  <li>Item ii</li>
  <li>Item iii</li>
</ol>

Note: Less common but available for specific styling needs

Recipe Steps

<h2>How to Make Pancakes</h2>
<ol>
  <li>Mix dry ingredients (flour, sugar, baking powder, salt)</li>
  <li>In another bowl, beat eggs and mix with milk and melted butter</li>
  <li>Combine wet and dry ingredients, stir until just blended</li>
  <li>Heat a lightly oiled griddle or frying pan over medium heat</li>
  <li>Pour batter onto the griddle, using approximately 1/4 cup for each pancake</li>
  <li>Cook until bubbles form and edges are dry, then flip and cook until browned</li>
</ol><h2>How to Make Pancakes</h2>
<ol>
  <li>Mix dry ingredients (flour, sugar, baking powder, salt)</li>
  <li>In another bowl, beat eggs and mix with milk and melted butter</li>
  <li>Combine wet and dry ingredients, stir until just blended</li>
  <li>Heat a lightly oiled griddle or frying pan over medium heat</li>
  <li>Pour batter onto the griddle, using approximately 1/4 cup for each pancake</li>
  <li>Cook until bubbles form and edges are dry, then flip and cook until browned</li>
</ol>

Software Installation Guide

<h2>Installation Instructions</h2>
<ol type="I">
  <li>System Requirements
    <ol type="A">
      <li>Windows 10 or later</li>
      <li>4GB RAM minimum</li>
      <li>2GB free disk space</li>
    </ol>
  </li>
  <li>Download Process
    <ol type="A">
      <li>Visit our website</li>
      <li>Click Download button</li>
      <li>Save installer to your computer</li>
    </ol>
  </li>
  <li>Installation Steps
    <ol type="A">
      <li>Run the installer</li>
      <li>Follow on-screen instructions</li>
      <li>Restart computer if prompted</li>
    </ol>
  </li>
</ol><h2>Installation Instructions</h2>
<ol type="I">
  <li>System Requirements
    <ol type="A">
      <li>Windows 10 or later</li>
      <li>4GB RAM minimum</li>
      <li>2GB free disk space</li>
    </ol>
  </li>
  <li>Download Process
    <ol type="A">
      <li>Visit our website</li>
      <li>Click Download button</li>
      <li>Save installer to your computer</li>
    </ol>
  </li>
  <li>Installation Steps
    <ol type="A">
      <li>Run the installer</li>
      <li>Follow on-screen instructions</li>
      <li>Restart computer if prompted</li>
    </ol>
  </li>
</ol>

Academic Outline

<h2>Research Paper Outline</h2>
<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background information</li>
      <li>Thesis statement</li>
    </ol>
  </li>
  <li>Literature Review
    <ol type="a">
      <li>Previous studies</li>
      <li>Gaps in research</li>
    </ol>
  </li>
  <li>Methodology
    <ol type="a">
      <li>Participants</li>
      <li>Procedure</li>
      <li>Data analysis</li>
    </ol>
  </li>
  <li>Results</li>
  <li>Discussion</li>
  <li>Conclusion</li>
</ol><h2>Research Paper Outline</h2>
<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background information</li>
      <li>Thesis statement</li>
    </ol>
  </li>
  <li>Literature Review
    <ol type="a">
      <li>Previous studies</li>
      <li>Gaps in research</li>
    </ol>
  </li>
  <li>Methodology
    <ol type="a">
      <li>Participants</li>
      <li>Procedure</li>
      <li>Data analysis</li>
    </ol>
  </li>
  <li>Results</li>
  <li>Discussion</li>
  <li>Conclusion</li>
</ol>

Mixed List Nesting

Combining ordered and unordered lists

<ol>
  <li>Main point 1
    <ul>
      <li>Sub-point A</li>
      <li>Sub-point B</li>
    </ul>
  </li>
  <li>Main point 2
    <ul>
      <li>Sub-point C</li>
      <li>Sub-point D</li>
    </ul>
  </li>
</ol><ol>
  <li>Main point 1
    <ul>
      <li>Sub-point A</li>
      <li>Sub-point B</li>
    </ul>
  </li>
  <li>Main point 2
    <ul>
      <li>Sub-point C</li>
      <li>Sub-point D</li>
    </ul>
  </li>
</ol>

Usage: When you need both ordered and unordered sub-points

Multi-level Ordered List

Deeply nested ordered lists with different numbering

<ol type="1">
  <li>First level
    <ol type="A">
      <li>Second level
        <ol type="a">
          <li>Third level
            <ol type="i">
              <li>Fourth level</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol><ol type="1">
  <li>First level
    <ol type="A">
      <li>Second level
        <ol type="a">
          <li>Third level
            <ol type="i">
              <li>Fourth level</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Usage: For complex outlines or legal documents

Custom Number Styling

Using CSS to style list numbers

<style>
.custom-ol {
  list-style-type: none;
  counter-reset: my-counter;
  padding-left: 0;
}
.custom-ol li {
  counter-increment: my-counter;
  margin-bottom: 10px;
  position: relative;
  padding-left: 35px;
}
.custom-ol li::before {
  content: counter(my-counter);
  position: absolute;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: #4a6ee0;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
}
</style>

<ol class="custom-ol">
  <li>Styled item 1</li>
  <li>Styled item 2</li>
  <li>Styled item 3</li>
</ol><style>
.custom-ol {
  list-style-type: none;
  counter-reset: my-counter;
  padding-left: 0;
}
.custom-ol li {
  counter-increment: my-counter;
  margin-bottom: 10px;
  position: relative;
  padding-left: 35px;
}
.custom-ol li::before {
  content: counter(my-counter);
  position: absolute;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: #4a6ee0;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
}
</style>

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

Note: Allows for complete control over number appearance

Horizontal List

Displaying ordered list items horizontally

<style>
.horizontal-ol {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 15px;
}
.horizontal-ol li {
  background: #f0f0f0;
  padding: 8px 15px;
  border-radius: 20px;
  position: relative;
}
.horizontal-ol li::before {
  content: counter(my-counter);
  background: #4a6ee0;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  margin-right: 8px;
  font-size: 12px;
  line-height: 20px;
}
</style>

<ol class="horizontal-ol">
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol><style>
.horizontal-ol {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 15px;
}
.horizontal-ol li {
  background: #f0f0f0;
  padding: 8px 15px;
  border-radius: 20px;
  position: relative;
}
.horizontal-ol li::before {
  content: counter(my-counter);
  background: #4a6ee0;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  margin-right: 8px;
  font-size: 12px;
  line-height: 20px;
}
</style>

<ol class="horizontal-ol">
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol>

Note: Useful for progress indicators or step-by-step processes

Ordered List Playground

Experiment with ordered lists in our live editor

Ordered List Examples Preview

Ready-to-use examples covering different list scenarios

Live Preview

Features Included

Basic Lists

Simple numbering

Attributes

type, start, reversed

Nesting

Multi-level lists

Styling

Custom CSS examples

All examples will be loaded into an interactive editor where you can modify and test them

< Previous Next >

HTML Ordered Lists Guide

What are Ordered Lists?

Key Features:

Ordered List Basics

Basic Ordered List

List with Custom Start

Reversed List

List with Value Attributes

List Numbering Types

Number Type (1, 2, 3)

Uppercase Letters (A, B, C)

Lowercase Letters (a, b, c)

Uppercase Roman (I, II, III)

Lowercase Roman (i, ii, iii)

Practical Examples

Recipe Steps

Software Installation Guide

Academic Outline

Nesting Ordered Lists

Mixed List Nesting

Multi-level Ordered List

Advanced Styling Techniques

Custom Number Styling

Horizontal List

Ordered List Playground

Ordered List Examples Preview

Features Included