« Previous Next »

Ordered HTML List

An ordered list begins with the <ol> tag, and each item in the list is defined using the < li> tag.

list items in an ordered list are marked with numbers By default:

Output 1:

Numbers:

Output:

Uppercase Letters:

Output:

Lowercase Letters:

Output:

Roman Numbers - Uppercase

Output:

Roman Numbers - Uppercase

Output:

Practice Exercises

Task 1: How to display an Ordered List using Uppercase Roman Numerals?

Goal: Create a top-3 rankings list formatted with uppercase Roman numerals (I, II, III).
💡 Hint: Use type="I" inside the <ol> tag.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Roman Numerals List</title>
  </head>
  <body>
    <h3>Project Execution Phases</h3>

    <ol type="I">
      <li>Requirement Analysis</li>
      <li>System Design & Prototyping</li>
      <li>Deployment & Maintenance</li>
    </ol>
  </body>
</html>
Output :

Project Execution Phases

  1. Requirement Analysis
  2. System Design & Prototyping
  3. Deployment & Maintenance
Explanation: Setting type="I" changes the numbering format to capital Roman numerals (I, II, III, IV...).
Task 2: How to start an alphabet-ordered list from a specific letter (e.g., starting from 'e')?

Goal: Create a lowercase alphabet list that starts counting from the 5th item ('e') onwards.
💡 Hint: Use type="a" along with the start="5" attribute.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Start List</title>
  </head>
  <body>
    <h3>Additional Steps (Section 2)</h3>

    <ol type="a" start="5">
      <li>Review Pull Request</li>
      <li>Merge into Staging</li>
      <li>Trigger Production Build</li>
    </ol>
  </body>
</html>
Output :

Additional Steps (Section 2)

  1. Review Pull Request
  2. Merge into Staging
  3. Trigger Production Build
Explanation: The start attribute always takes a numeric position (5th position = letter 'e' when combined with type="a").
Task 3: How to create a countdown or reverse-ordered list in HTML?

Goal: Build a top-3 countdown list that counts backwards from 3 to 1.
💡 Hint: Add the boolean reversed attribute directly inside the <ol> tag.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Reversed List Example</title>
  </head>
  <body>
    <h3>Product Launch Countdown</h3>

    <ol reversed>
      <li>Final Security Audit</li>
      <li>Server Pre-warming</li>
      <li>DNS Switch to Live</li>
    </ol>
  </body>
</html>
Output :

Product Launch Countdown

  1. Final Security Audit
  2. Server Pre-warming
  3. DNS Switch to Live
Explanation: The reversed attribute renders the order in descending order (3, 2, 1) without modifying the source code sequence.
« Previous Next »