HTML <ol> Tag – The Ordered List Element

Definition and Usage

The <ol> tag represents a list of items where the order is specified.

The term 'ol' is an abbreviation for Ordered List, meaning that changing the order of the items materially affects their meaning.

The <ol> tag is used to list items where the order of importance is specified.
The child items of this element are defined using the <li> tag.
A numbered marker (for example, "1, 2, 3, ...") is automatically generated and displayed in sequence before each item.

If you need to create a list of items where the order is not specified, use the <ul> tag.

Basic Example

The following is a simple example using the <ol> tag.

HTML

<p>Our local diner has many delicious menu items.</p>
<ol>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ol>

HTML <p> Tag

Permitted Content and Important Notes

The content that can be used as child elements of the <ol> tag is limited

<li>
<script>
<template>

Except for zero or more of these elements, other elements or the insertion of text (that is, a text node) are not allowed.

The following examples show incorrect cases that use content not permitted within the <ol> tag, as well as correct cases.

Incorrect and Correct Examples

HTML - Incorrect Example The <p> tag is used as a child of the <ol> tag, which is not permitted.

<ol>
    <p>Our local diner has many delicious menu items.</p>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ol>

HTML - Incorrect Example Plain text is used directly within the <ol> tag.

<ol>
    Our local diner has many delicious menu items.
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ol>

HTML - Correct Example

<p>Our local diner has many delicious menu items.</p>
<ol>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ol>

HTML - Incorrect Example The <a> tag is used as a direct child of the <ol> tag.

<h3>Real-time Search Rankings</h3>
<ol>
    <a href=""><li>How to learn HTML</li></a>
    <a href=""><li>How to learn CSS</li></a>
    <a href=""><li>How to learn JavaScript</li></a>
    <a href=""><li>How to learn PHP</li></a>
</ol>

HTML <h1>~<h6>Tags

HTML - Correct Example

<h3>Real-time Search Rankings</h3>
<ol>
    <li><a href="">How to learn HTML</a></li>
    <li><a href="">How to learn CSS</a></li>
    <li><a href="">How to learn JavaScript</a></li>
    <li><a href="">How to learn PHP</a></li>
</ol>

HTML - Not Incorrect but Not Recommended Although it is not a syntax error for the <ol> tag to have no content, it is not recommended since it does not represent a meaningful list.

<ol>
    <!-- No content -->
</ol>

Useful Attributes

The <ol> tag provides two particularly useful attributes: reversed and start.

`reversed` Attribute

The reversed attribute reverses the order of the list items. It is a boolean attribute, meaning you only need to include the attribute name without specifying a value.

HTML

<p>Our local diner has many delicious menu items.</p>
<ol reversed>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ol>

`start` Attribute

The start attribute specifies the starting value for the first item in an <ol>. It accepts integer values, including negative integers, 0, and positive integers.

HTML

<p>Our local diner has many delicious menu items.</p>
<ol>
    <li>Burger</li>
    <li>Fries</li>
    <li>Grilled cheese</li>
    <li>Fried chicken</li>
</ol>
<p>The following items are also highly recommended:</p>
<ol start="5">
    <li>Mozzarella Sticks</li>
    <li>Onion Rings</li>
    <li>Chocolate Milkshake</li>
</ol>

Using Nested Lists

The <ol> and <ul> tags can be nested within an <li> tag as needed. These tags can also be mixed and used interchangeably to create complex list structures.

Nesting the <ul> Tag Inside the <li> Tag

<p>Our local diner has many delicious menu items.</p>
<ol>
    <li>
        Noodles
        <ul>
            <li>Ramen</li>
            <li>Udon</li>
            <li>Spaghetti</li>
        </ul>
    </li>
    <li>
        Wraps
        <ul>
            <li>Tuna wrap</li>
            <li>Veggie wrap</li>
            <li>Fish roe wrap</li>
        </ul>
    </li>
    <li>
        Cutlets
        <ul>
            <li>Pork cutlet</li>
            <li>Cutlet combo</li>
        </ul>
    </li>
</ol>

Nesting the <ol> Tag Inside the <li> Tag

<p>Our local diner has many delicious menu items.</p>
<ol>
    <li>
        Noodles
        <ol>
            <li>Ramen</li>
            <li>Udon</li>
            <li>Spaghetti</li>
        </ol>
    </li>
    <li>
        Wraps
        <ol>
            <li>Tuna wrap</li>
            <li>Veggie wrap</li>
            <li>Fish roe wrap</li>
        </ol>
    </li>
    <li>
        Cutlets
        <ol>
            <li>Pork cutlet</li>
            <li>Cutlet combo</li>
        </ol>
    </li>
</ol>