HTML Ordered Lists

HTML ordered lists are used to display items in a specific sequence. By default, each item appears with a number, starting from 1. The HTML <ol> element defines the ordered list, while the <li> element defines each list item.

Ordered lists are useful for step-by-step instructions, tutorials, recipes, rankings, and other content where the sequence of items matters.

What Is an HTML Ordered List?

An HTML ordered list organizes related items using numbers or other sequential markers, such as letters and Roman numerals. Browsers display numbered items by default, but you can change the numbering style using the type attribute or CSS.

HTML Ordered List Syntax

<ol>
    <li>Open your code editor</li>
    <li>Create an HTML file</li>
    <li>Write your HTML code</li>
    <li>Open the file in a browser</li>
</ol>

In this example, the browser displays four steps in numerical order.

HTML Ordered List Example

The following example demonstrates how to create an ordered list in a complete HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Ordered Lists</title>
</head>
<body>

    <h1>HTML Ordered Lists</h1>

    <h2>Steps to Create a Webpage</h2>

    <ol>
        <li>Open a text editor</li>
        <li>Create an index.html file</li>
        <li>Add HTML elements</li>
        <li>Save and open the file in a browser</li>
    </ol>

</body>
</html>

The <ol> element groups the list items, and each <li> element represents an individual step.

HTML Ordered List Types

The type attribute allows you to change the numbering style of an ordered list.

Type	Description	Example
`1`	Decimal numbers	1, 2, 3
`A`	Uppercase letters	A, B, C
`a`	Lowercase letters	a, b, c
`I`	Uppercase Roman numerals	I, II, III
`i`	Lowercase Roman numerals	i, ii, iii

Example of Different Ordered List Types

<h2>Uppercase Letters</h2>
<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<h2>Roman Numerals</h2>
<ol type="I">
    <li>Introduction</li>
    <li>Examples</li>
    <li>Practice</li>
</ol>

The first list uses uppercase letters, while the second uses uppercase Roman numerals.

Starting an Ordered List from a Specific Number

The start attribute specifies the number at which an ordered list begins.

<ol start="5">
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

The list starts at 5 and continues with 6 and 7.

Reversed Ordered Lists

The reversed attribute displays an ordered list in descending order.

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

By default, the displayed numbering is 3, 2, and 1. You can combine reversed with start to choose a different starting number.

HTML Ordered List Attributes

Attribute	Description
`type`	Specifies the numbering style.
`start`	Defines the starting number.
`reversed`	Reverses the numbering order.

These attributes help you organize list items according to the requirements of your webpage.