HTML ol Tag: The Ordered List Element

The HTML <ol> tag creates an ordered list of items, with each list item having a number (or letter) in front of it. The ordered list element is crucial for creating structured, easy-to-follow content in HTML documents.

How to Use the Tag in HTML

The <ol> tag indicates the beginning and end of an HTML list, ordered by appearance. The <li> tag defines the list items that belong to the list. By default, each list item within the ordered list element receives numbers starting from 1.

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

• <ol>: The tag to mark out the ordered list in HTML.
• <li>: The tag to create list items for the ordered list.

When to Use the Tag in HTML

Ordered lists are useful for creating lists where the order of the list items is important. Common use cases include legal documents, step-by-step instructions, and rankings.

Examples of the HTML Ordered List Element

Countless web pages use the ordered list element to create lists where the order of the list items matters.

Instructional Guides

A tech support page might use a numbered list to present troubleshooting instructions in an easy-to-follow manner.

<ol>
    <li>Turn on the device by pressing the power button.</li>
    <li>Select the Setup Wizard.</li>
    <li>Follow the on-screen instructions to complete the setup.</li>
</ol>

Educational Content

A history website might use an ordered list to present a timeline of significant events.

<ol>
    <li>Introduction to Photosynthesis</li>
    <li>The Light-Dependent Reactions</li>
    <li>The Calvin Cycle</li>
</ol>

Recipe Instructions

A food blog might use an ordered list to share a step-by-step recipe guide.

<article>
    <h2>How to Make Chocolate Chip Cookies</h2>
    <ol>
        <li>Preheat your oven to 350°F (175°C).</li>
        <li>In a bowl, mix butter, sugar, and eggs.</li>
        <li>Add flour, baking soda, and salt.</li>
        <li>Fold in chocolate chips.</li>
        <li>Bake for 10-12 minutes until golden brown.</li>
    </ol>
</article>

Learn More About the HTML Ordered List Element

Nested Lists

You can nest HTML lists, unordered or ordered, within each other to create sub-steps or hierarchical structures.

<ol>
    <li>Prepare ingredients
        <ol>
            <li>Flour</li>
            <li>Sugar</li>
            <li>Eggs</li>
        </ol>
    </li>
    <li>Mix ingredients</li>
    <li>Bake for 20 minutes</li>
</ol>

Customizing the Marker Type

You can change the numbering type using the type attribute. Typical alternative numbering types are A for uppercase letters and a for lowercase letters. Types like I for uppercase Roman numerals and i for lowercase Roman numerals are also available but less common.

<ol type="A">
    <li>First major point</li>
    <li>Second major point</li>
</ol>

Combining Ordered Lists with Other HTML Tags

Ordered lists are particularly useful in combination with other HTML tags like <div>, <section>, and <article>. By wrapping ordered lists in such elements, you can create semantic and organized web layouts.

<article>
    <h2>Recipe</h2>
    <ol>
        <li>Chop onions.</li>
        <li>Fry the onions until golden brown.</li>
    </ol>
</article>

Unordered Lists in HTML

The <ul> tag creates an unordered or bulleted list in HTML. Unlike ordered lists, HTML unordered lists use bullet points as markers. They’re especially useful in scenarios where the order of list items doesn't matter.

<p>Ingredients (order does not matter):</p>
<ul>
    <li>Sugar</li>
    <li>Flour</li>
    <li>Oil</li>
</ul>

Styling Ordered Lists with CSS

You can use CSS to style and customize the appearance of your ordered lists. For example, you can change marker styles, colors, and spacing of lists and list items.

<style>
    ol.custom {
        list-style-type: none;
        padding: 0;
    }
    ol.custom li::before {
        content: counter(item) ". ";
        counter-increment: item;
        color: red;
    }
</style>
<ol class="custom">
    <li>Styled item</li>
    <li>Styled item</li>
</ol>