HTML <ol> tag – Ordered List

What is the HTML <ol> Tag?

This <ol> tag creates an ordered list with different types, such as numbers, letters, and Roman numerals, depending on how you want to show the order of the items. These types can be set using attributes in this tag. If you do not set any attributes in this tag, the browser shows numbers by default, such as 1, 2, 3.

This element is like a recipe, and attributes are like the ingredients and spices added to it. Just as different ingredients and spices give a recipe different tastes, different attributes set different types and formats for the ordered list on a web page.

Uses:

• It is used to create an ordered list of items.
• It displays list items in a specific order using numbers, letters, or Roman numerals.
• It is useful when the order of the list items is important.

Syntax:

<ol type="1" start="1" reversed>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

List of Attributes:

• type → To provide the Numbering style (1, A, a, I, i)
• start → To set the starting number
• reversed → To display the list in reverse order.r

Types of Ordered Lists:

• Numbers: 1, 2, 3
• Uppercase Letters: A, B, C
• Lowercase Letters: a, b, c
• Uppercase Roman Numerals: I, II, III
• Lowercase Roman Numerals: i, ii, iii

Examples:

1.Numbers:

Output:

1. HTML
2. CSS
3. JavaScript

2. Uppercase Letters:

Output:

1. HTML
2. CSS
3. JavaScript

3.Lowercase Letters:

Output:

1. HTML
2. CSS
3. JavaScript

4.Uppercase Roman Numerals:

Output:

1. HTML
2. CSS
3. JavaScript

5.Lowercase Roman Numerals:

Output:

1. HTML
2. CSS
3. JavaScript

Using the <ol> Tag with a <table>

• The <ol> tag is placed inside the <td> element of a <table>. The <ol> tag creates an ordered list inside the table cell, where the list items are displayed in an ordered way.
• The <li> tag is placed inside the <ol> tag to create each item in the ordered list. So, the <ol> tag helps to create an ordered list inside a table cell and display the items in an ordered way.

Example:

<table border="1" cellpadding="8">
    <tr>
        <th>Course</th>
        <th>Topics</th>
    </tr>

    <tr>
        <td>Web Development</td>
        <td>
            <ol>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ol>
        </td>
    </tr>

    <tr>
        <td>Backend Development</td>
        <td>
            <ol>
                <li>PHP</li>
                <li>MySQL</li>
                <li>Python</li>
            </ol>
        </td>
    </tr>

</table>

Output: