HTML <ol> Element

Publish in HTML Tutorial el 25/05/2025 14:03

The <ol> HTML element represents an ordered list of items, typically rendered as a numbered list. Ordered lists are used when the sequence of items is important, such as step-by-step instructions or rankings.

Key features of <ol>:

Creates a numbered list by default
Can be customized with different numbering styles
Supports nested lists (both ordered and unordered)
Works with CSS for advanced styling
Can be manipulated with JavaScript

Basic Syntax

Rendered Example

Play Code

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

Examples of <ol> Usage

Example 1: Basic Ordered List

A simple ordered list with default numbering.

Play Code

<ol>
  <li>Preheat oven to 350°F (175°C)</li>
  <li>Mix dry ingredients in a bowl</li>
  <li>Add wet ingredients and stir</li>
  <li>Pour batter into greased pan</li>
  <li>Bake for 30 minutes</li>
</ol>

Example 2: Custom Numbering Type

Using the type attribute to change numbering style.

Play Code

<ol type="A">
  <li>Introduction</li>
  <li>Methodology</li>
  <li>Results</li>
  <li>Conclusion</li>
</ol>

<ol type="i" start="5">
  <li>Chapter Five</li>
  <li>Chapter Six</li>
  <li>Chapter Seven</li>
</ol>

Example 3: Nested Ordered Lists

Creating a hierarchical structure with nested ordered lists.

Play Code

<ol>
  <li>Main Topic
    <ol>
      <li>Subtopic A
        <ol type="a">
          <li>Detail 1</li>
          <li>Detail 2</li>
        </ol>
      </li>
      <li>Subtopic B</li>
    </ol>
  </li>
  <li>Second Main Topic</li>
</ol>

Example 4: Dynamic List with JavaScript

Adding items to an ordered list using JavaScript.

Play Code

<ol id="dynamic-list"></ol>
<button onclick="addItem()">Add Item</button>

<script>
  let counter = 1;
  function addItem() {
    const list = document.getElementById('dynamic-list');
    const newItem = document.createElement('li');
    newItem.textContent = `Item ${counter++}`;
    list.appendChild(newItem);
  }
</script>

Example 5: Reversed Ordered List with JavaScript

Creating and manipulating a reversed ordered list.

Play Code

<ol id="countdown" reversed>
  <li>Three</li>
  <li>Two</li>
  <li>One</li>
</ol>
<button onclick="startCountdown()">Start Countdown</button>

<script>
  function startCountdown() {
    const list = document.getElementById('countdown');
    let current = list.children.length;
    
    const interval = setInterval(() => {
      if (current > 0) {
        list.children[current-1].style.color = 'red';
        current--;
      } else {
        clearInterval(interval);
        const newItem = document.createElement('li');
        newItem.textContent = 'Liftoff!';
        newItem.style.color = 'green';
        newItem.style.fontWeight = 'bold';
        list.prepend(newItem);
      }
    }, 1000);
  }
</script>

Tips and Tricks

Use the start attribute to begin numbering from a specific value
Combine with CSS list-style-type for more numbering style options
The reversed attribute will display items in descending order
For semantic HTML, use ordered lists only when the sequence matters
Consider accessibility - screen readers will announce the number of items

Browser Support

The <ol> element is supported by all browsers and has excellent compatibility across versions. All modern browsers support the main attributes like type, start, and reversed.