How do you reverse the order of an list?

You can reverse the order of an list using the reversed attribute.

Table of contents

Introduction

Definition and Usage

Syntax

Why Use the `<ol>` Tag?

Accepted Attributes

HTML Tag Examples

6.1.

Example 1: Basic Ordered List

6.2.

Example 2: Different Numbering Styles

6.3.

Example 3: Styling with CSS

Supported Browsers

Frequently Asked Questions

8.1.

1. What is the purpose of the <ol> tag in HTML?

8.2.

2. How do you reverse the order of an <ol> list?

8.3.

3. Can you customize the numbering style in an ordered list?

Conclusion

Last Updated: Jan 18, 2025

Easy

The <ol> Tag in HTML

Author Rahul Singh

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

The <ol> tag in HTML is used to create ordered lists, which display items in a specific order, usually numbered. It is commonly used when the sequence of the list items matters, such as instructions, steps, or rankings. Each item in the ordered list is placed inside a <li> tag.

In this article, we will discuss the syntax of the <ol> tag, explore its accepted attributes, see practical examples, and check browser compatibility.

Definition and Usage

The `<ol>` tag in HTML stands for "ordered list." It is used to create a list of items that are displayed in a specific order, typically numbered. This is different from the `<ul>` tag, which creates unordered lists with bullet points. The `<ol>` tag is ideal for situations where the sequence of items matters, like steps in a recipe, rankings, or instructions.

For example:

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

When you open this code in a browser, it will display:

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

The `<ol>` tag automatically numbers the list items, starting from 1. Each item in the list is defined using the `<li>` (list item) tag. This makes it easy to create structured & organized content on your web page.

Syntax

The basic syntax of the <ol> tag is as follows:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Explanation:

The <ol> tag starts the ordered list.
Each item in the list is defined using the <li> (list item) tag.
The list items are automatically numbered, starting from 1 by default.

Why Use the `<ol>` Tag?

1. Clarity: It helps present information in a clear & logical sequence.

2. Readability: Numbered lists are easier to follow, especially for instructions or steps.

3. Flexibility: You can customize the numbering style, start point, & more using attributes.

Accepted Attributes

The `<ol>` tag comes with several attributes that allow you to customize how the ordered list is displayed. These attributes help you control the numbering style, the starting point of the list, & even reverse the order of numbering. Let’s discuss each attribute in detail with proper examples.

type:
- Defines the numbering style of the list.
- Values:
  - 1 (default): Numbers (1, 2, 3, ...)
  - a: Lowercase letters (a, b, c, ...)
  - A: Uppercase letters (A, B, C, ...)
  - i: Lowercase Roman numerals (i, ii, iii, ...)
  - I: Uppercase Roman numerals (I, II, III, ...)

Example:

<ol type="a">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ol>

Output:

a. Apple
b. Banana
c. Cherry

start:

The `start` attribute allows you to specify the starting number (or letter) for the list. This is useful when you want to continue a list from a specific point.

Example:

<ol start="5">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Output:

5. Item 1
6. Item 2

reversed:

The `reversed` attribute is a boolean attribute that reverses the numbering order of the list. When added, the list starts from the highest number & counts down.

Example:

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

Output:

2. First
Second

Combining Attributes

You can combine multiple attributes to create more customized lists. For example, you can use `type` & `start` together to create a list with uppercase letters starting from a specific point.

Example:

<ol type="I" start="4">
  <li>Fourth item</li>
  <li>Fifth item</li>
  <li>Sixth item</li>
</ol>

Output:

IV. Fourth item  
V. Fifth item  
VI. Sixth item

global attributes:

Includes standard attributes like id, class, style, and title for styling and scripting.

Example:

<ol class="custom-list" style="color:blue;">
    <li>Blueberry</li>
    <li>Raspberry</li>
</ol>

Output:

The text appears in blue.

HTML Tag Examples

Example 1: Basic Ordered List

<!DOCTYPE html>
<html>
<head>
    <title>Basic Ordered List</title>
</head>
<body>
    <h2>Shopping List</h2>
    <ol>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ol>
</body>
</html>

Output:

Example 2: Different Numbering Styles

<!DOCTYPE html>
<html>
<head>
    <title>Numbering Styles</title>
</head>
<body>
    <h2>Different Types of Lists</h2>
    <ol type="A">
        <li>Introduction</li>
        <li>Body</li>
        <li>Conclusion</li>
    </ol>
    <ol type="i">
        <li>Chapter 1</li>
        <li>Chapter 2</li>
    </ol>
</body>
</html>

Output:

Example 3: Styling with CSS

<!DOCTYPE html>
<html>
<head>
    <title>Styled Ordered List</title>
    <style>
        ol.custom {
            list-style-type: upper-roman;
            color: green;
        }
    </style>
</head>
<body>
    <h2>Styled List</h2>
    <ol class="custom">
        <li>Point One</li>
        <li>Point Two</li>
    </ol>
</body>
</html>

Output:

Supported Browsers

The <ol> tag is universally supported by all major browsers. Here is the compatibility table:

Browser	Support
Google Chrome	Yes
Mozilla Firefox	Yes
Microsoft Edge	Yes
Safari	Yes
Opera	Yes

Frequently Asked Questions

1. What is the purpose of the <ol> tag in HTML?

The <ol> tag is used to create ordered lists where the sequence of items matters, such as step-by-step instructions or rankings.

2. How do you reverse the order of an <ol> list?

You can reverse the order of an <ol> list using the reversed attribute.

3. Can you customize the numbering style in an ordered list?

Yes, you can use the type attribute to customize the numbering style (e.g., 1, A, i, etc.).

Conclusion

The <ol> tag in HTML is a fundamental element for creating ordered lists. It allows developers to structure content clearly and sequentially. With attributes like type, start, and reversed, you can customize lists to suit your needs. This tag is supported by all modern browsers, making it a reliable choice for web development.

Live masterclass

System Design Questions Asked at Microsoft, Oracle, PayPal

by Pranav Malik

23 Apr, 2025

01:30 PM

24+ registered

Master DSA to Ace MAANG SDE Interviews

by Saurav Prateek

21 Apr, 2025

01:30 PM

474+ registered

Google Data Analyst roadmap: Essential SQL concepts

by Maaheen Jaiswal

22 Apr, 2025

01:30 PM

1023+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

24 Apr, 2025

01:30 PM

176+ registered

System Design Questions Asked at Microsoft, Oracle, PayPal

by Pranav Malik

23 Apr, 2025

01:30 PM

24+ registered

Master DSA to Ace MAANG SDE Interviews

by Saurav Prateek

21 Apr, 2025

01:30 PM

474+ registered

View more events