Skip to main content

HTML Ordered Lists

Ordered Lists are used when the sequence or ranking of items is important. Unlike unordered lists (<ul>) where bullet points imply no specific order, ordered lists use markers (like numbers or letters) to convey a clear, sequential flow.

The primary structure uses the <ol> (Ordered List) tag as the container, with each item defined by the <li> (List Item) tag.


Creating a Basic Ordered List​

Ordered lists are the perfect tool for step-by-step instructions or rankings where the order cannot be changed. By default, the list items are numbered starting at 1.

Example: Step-by-Step Instructions​

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ordered List Example</title>
</head>
<body>
  <h1>How to Brew Coffee</h1>
  <ol>
    <li>Grind the coffee beans.</li>
    <li>Heat the water to 200°F.</li>
    <li>Pour hot water slowly over the grounds.</li>
    <li>Enjoy your fresh coffee!</li>
  </ol>
</body>
</html>
http://.../index.html

 

How to Brew Coffee

 
       
  1. Grind the coffee beans.
    2.    
  2. Heat the water to 200°F.
    3.    
  3. Pour hot water slowly over the grounds.
    4.    
  4. Enjoy your fresh coffee!
    5.  

Controlling the List: Key <ol> Attributes​

The power of the ordered list comes from its unique attributes, which allow you to customize the style, starting point, and direction of the counting.

1. The type Attribute (Changing the Marker)​

The type attribute lets you choose the numbering style used for the list items.

ValueMarker StyleExample
1Decimal numbers (Default)1, 2, 3, ...
aLowercase lettersa, b, c, ...
AUppercase lettersA, B, C, ...
iLowercase Roman numeralsi, ii, iii, ...
IUppercase Roman numeralsI, II, III, ...
Using the type Attribute
<ol type="A">
  <li>First Step</li>
  <li>Second Step</li>
  <li>Third Step</li>
</ol>

2. The start Attribute (Changing the Starting Point)​

The start attribute lets you specify the number (or letter position) where the list should begin its count. This is always defined using a numeric value, regardless of the type.

Using the start Attribute
<ol start="5">
  <li>Continue with this step</li>
  <li>Finish the procedure</li>
</ol>

3. The reversed Attribute (Counting Down)​

The reversed attribute is a boolean attribute that tells the browser to count the items in descending order. This is perfect for countdowns or reversing rankings.

Using the reversed Attribute
<ol reversed>
  <li>Bronze</li>
  <li>Silver</li>
  <li>Gold</li>
</ol>

Combining Attributes​

You can easily combine attributes to create highly specific list styles, such as a Roman numeral list that counts down from 10.

Combined Attributes Example
<ol type="I" start="10" reversed>
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol>

Nested Ordered Lists​

Just like unordered lists, ordered lists can be nested to create a hierarchical outline structure. For clarity, it's often best to change the type for nested lists.

Example: Nested Outline​

Nested Ordered List Example
<ol type="A">
  <li>Introduction (Section A)
    <ol type="i">
      <li>Background Information</li>
      <li>Problem Statement</li>
    </ol>
  </li>
  <li>Methodology (Section B)
    <ol type="1">
      <li>Data Collection</li>
      <li>Data Analysis</li>
    </ol>
  </li>
</ol>
http://.../index.html

 

       
  1. Introduction (Section A)      
             
    1. Background Information
      2.        
    2. Problem Statement
      3.      
       
    2.    
  2. Methodology (Section B)      
             
    1. Data Collection
      2.        
    2. Data Analysis
      3.      
       
    3.  

Conclusion​

The ordered list (<ol>) is the definitive way to present sequential information in HTML. By utilizing the type, start, and reversed attributes, you can precisely control the numbering style and flow, ensuring your instructions and rankings are communicated accurately and clearly to the user.