HtmlHow-ToBeginner · 3 min read

How to Reverse Ordered List in HTML: Simple Guide

To reverse an ordered list in HTML, add the reversed attribute to the <ol> tag. This makes the list count down instead of up, showing numbers in descending order automatically.

📐

Syntax

The reversed attribute is added to the <ol> tag to make the list numbers count down instead of up.

Example parts:

<ol reversed>: Starts an ordered list with reversed numbering.
<li>Item</li>: Each list item.
</ol>: Ends the ordered list.

html

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

Output

3. First item 2. Second item 1. Third item

💻

Example

This example shows an ordered list reversed using the reversed attribute. The list numbers start from the highest number and count down.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reversed Ordered List Example</title>
</head>
<body>
  <h2>Reversed Ordered List</h2>
  <ol reversed>
    <li>Build Projects</li>
    <li>Practice CSS</li>
    <li>Learn HTML</li>
  </ol>
</body>
</html>

Output

3. Build Projects 2. Practice CSS 1. Learn HTML

⚠️

Common Pitfalls

Common mistakes when reversing ordered lists include:

Not using the reversed attribute, so the list counts up as usual.
Trying to reverse the list with CSS only, which does not change numbering order.
Forgetting that the start attribute can be combined with reversed to set a custom starting number.

Example of wrong and right usage:

html

<!-- Wrong: No reversed attribute, list counts up -->
<ol>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

<!-- Right: Using reversed attribute to count down -->
<ol reversed>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

Output

1. Item A 2. Item B 3. Item C 3. Item A 2. Item B 1. Item C

📊

Quick Reference

Summary tips for reversing ordered lists:

Use reversed attribute on <ol> to reverse numbering.
Combine with start attribute to set the starting number.
Do not rely on CSS to reverse numbering.
Works in all modern browsers.

✅

Key Takeaways

Add the reversed attribute to <ol> to reverse list numbering.

Use the start attribute with reversed to customize the starting number.

CSS alone cannot reverse the numbering of an ordered list.

Reversed ordered lists count down automatically in modern browsers.

Always test your list in a browser to confirm the numbering order.