<ol> - ordered list

<ol> is a tag in HTML used to create ordered lists, where list items are marked with numerical indices by default. Unlike unordered lists <ul>, <ol> arranges each item in a specific sequence, making it suitable for scenarios where order needs to be emphasized.

Basic Syntax of <ol>

<ol> must be used in conjunction with <li> tags, where each <li> represents a list item. The basic structure is as follows:

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

Rendered output:

1. First item
2. Second item
3. Third item

Controlling Numbering Style

The type attribute can be used to change the numbering style:

<ol type="A">
  <li>Uppercase letters</li>
  <li>B</li>
</ol>
<ol type="a">
  <li>Lowercase letters</li>
  <li>b</li>
</ol>
<ol type="I">
  <li>Roman numerals</li>
  <li>II</li>
</ol>

Output: A. Uppercase letters
B. B
a. Lowercase letters
b. b
I. Roman numerals
II. II

Custom Starting Number

The start attribute allows numbering to begin from a specified value:

<ol start="10">
  <li>Tenth item</li>
  <li>Eleventh item</li>
</ol>

Output: 10. Tenth item
11. Eleventh item

Reversed List

Adding the reversed attribute enables reverse numbering:

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

Output: 3. Third item
2. Second item

1. First item

Nested Lists

<ol> can be nested to create complex structures:

<ol>
  <li>Chapter 1
    <ol type="a">
      <li>Section 1</li>
      <li>Section 2</li>
    </ol>
  </li>
  <li>Chapter 2</li>
</ol>

Output:

1. Chapter 1
   a. Section 1
   b. Section 2
2. Chapter 2

Custom Styling with CSS

Default styles can be overridden using CSS:

<ol class="custom-list">
  <li>Custom-styled item</li>
  <li>Using ::before pseudo-element</li>
</ol>
<style>
  .custom-list {
    list-style: none;
    counter-reset: step-counter;
  }
  .custom-list li::before {
    content: "Step " counter(step-counter) ": ";
    counter-increment: step-counter;
    color: red;
  }
</style>

Output:
Step 1: Custom-styled item
Step 2: Using ::before pseudo-element

Practical Use Cases

Step-by-Step Instructions

<ol>
  <li>Turn on the device</li>
  <li>Enter system settings</li>
  <li>Select network configuration</li>
</ol>

Leaderboard Display

<ol start="1">
  <li>Zhang San - 95 points</li>
  <li>Li Si - 88 points</li>
  <li>Wang Wu - 76 points</li>
</ol>

Legal Clause Numbering

<ol type="I">
  <li>General Provisions
    <ol type="a">
      <li>Definitions</li>
      <li>Scope of Application</li>
    </ol>
  </li>
  <li>Rights and Obligations</li>
</ol>

Comparison with <ul>

Browser Compatibility Notes

All modern browsers support <ol>, but note the following:

• Older IE versions may have incomplete support for the reversed attribute
• Mobile browsers may render custom counters differently
• Check if numbering continues correctly across pages when printing

Advanced Usage Examples

Multi-level Directory Structure

<ol>
  <li>Part 1
    <ol type="a">
      <li>Chapter 1
        <ol type="i">
          <li>Section 1</li>
          <li>Section 2</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Dynamically Generated List

const data = ["Apple", "Banana", "Orange"];
const olElement = document.createElement('ol');
data.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  olElement.appendChild(li);
});
document.body.appendChild(olElement);