HTML Start and Reversed Lists

HTML ordered lists support the start and reversed attributes, which allow developers to control the numbering of list items. The start attribute specifies the number at which an ordered list begins, while the reversed attribute displays list numbers in descending order.

These attributes are useful for rankings, numbered instructions, countdowns, and other lists that require a specific numbering sequence. Both attributes work with the HTML <ol> element.

What Is the HTML Start Attribute?

The start attribute specifies the starting number of an ordered list. By default, an ordered list starts at 1. You can use start to begin numbering from another value.

HTML Start Attribute Syntax

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

In this example, the list starts at 5 and continues with 6 and 7.

HTML Start Attribute Example

The following example demonstrates how to use the start attribute 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 Start Attribute</title>
</head>
<body>

    <h1>HTML Start Attribute</h1>

    <h2>Programming Languages</h2>

    <ol start="3">
        <li>Java</li>
        <li>Python</li>
        <li>JavaScript</li>
    </ol>

</body>
</html>

The browser displays the list numbers as 3, 4, and 5. The start attribute accepts an integer, even when the ordered list uses letters or Roman numerals.

What Is the HTML Reversed Attribute?

The reversed attribute displays an ordered list in descending order instead of ascending order.

It is a Boolean attribute, which means that its presence enables reversed numbering.

HTML Reversed Attribute Syntax

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

Because the list contains three items, the browser displays the numbers 3, 2, and 1.

HTML Reversed List Example

The following example shows how to create a reversed ordered list.

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

    <h1>HTML Reversed Lists</h1>

    <h2>Countdown</h2>

    <ol reversed>
        <li>Get Ready</li>
        <li>Start</li>
        <li>Finish</li>
    </ol>

</body>
</html>

The list displays the numbers 3, 2, and 1. By default, the browser determines the starting number from the number of list items.

Using Start and Reversed Together

You can combine the start and reversed attributes to control both the starting number and the numbering direction.

<ol start="10" reversed>
    <li>Gold Medal</li>
    <li>Silver Medal</li>
    <li>Bronze Medal</li>
</ol>

The browser displays the numbers 10, 9, and 8. This combination is useful when creating descending rankings or numbered sequences that begin at a specific value.

HTML Start and Reversed Attributes

The following table summarizes the main differences between these attributes.

Feature	`start` Attribute	`reversed` Attribute
Purpose	Sets the starting number	Reverses the numbering direction
Attribute type	Integer value	Boolean attribute
Example	`<ol start="5">`	`<ol reversed>`
Result	Starts numbering at 5	Numbers items in descending order
Can be combined	Yes	Yes