Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML reserved Attribute
The HTML reversed attribute defines that the list order in ol HTML element should be descending in an HTML document. When this attribute is present, the ordered list numbers count down from a higher number to a lower number instead of the default ascending order.
Syntax
Following is the syntax for the reversed attribute −
<ol reversed> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
The reversed attribute is a boolean attribute, meaning its presence indicates the list should be reversed. No value is needed.
How the Reversed Attribute Works
By default, ordered lists count upward from 1 (1, 2, 3, 4...). When the reversed attribute is added, the list counts downward, starting from the total number of list items and decreasing to 1. For example, a list with 5 items would display as 5, 4, 3, 2, 1.
Example − Basic Reversed List
Following example demonstrates a simple reversed ordered list −
<!DOCTYPE html>
<html>
<head>
<title>HTML Reversed Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Top Programming Languages (Reversed Order)</h2>
<ol reversed>
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
<li>C++</li>
<li>HTML</li>
</ol>
</body>
</html>
The output shows the list numbered in reverse order −
Top Programming Languages (Reversed Order) 5. Python 4. JavaScript 3. Java 2. C++ 1. HTML
Example − Reversed List with Custom Start Value
The reversed attribute can be combined with the start attribute to begin counting down from a specific number −
<!DOCTYPE html>
<html>
<head>
<title>Reversed List with Start</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Countdown from 10</h2>
<ol reversed start="10">
<li>Ten</li>
<li>Nine</li>
<li>Eight</li>
<li>Seven</li>
</ol>
</body>
</html>
The output starts counting down from 10 instead of the default total number of items −
Countdown from 10 10. Ten 9. Nine 8. Eight 7. Seven
Example − Comparison of Normal and Reversed Lists
Following example shows the difference between a normal ordered list and a reversed one −
<!DOCTYPE html>
<html>
<head>
<title>Normal vs Reversed Lists</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Normal Ordered List</h3>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h3>Reversed Ordered List</h3>
<ol reversed>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
The output clearly shows the numbering difference −
Normal Ordered List 1. First Item 2. Second Item 3. Third Item Reversed Ordered List 3. First Item 2. Second Item 1. Third Item
Browser Compatibility
The reversed attribute is supported in HTML5 and works in all modern browsers including Chrome, Firefox, Safari, and Edge. It is not supported in Internet Explorer.
Common Use Cases
The reversed attribute is useful for scenarios such as −
Countdown lists − Displaying items in descending priority or countdown format
Rankings − Showing top-ranked items first with higher numbers
Historical timelines − Presenting events in reverse chronological order
Steps in reverse − Instructions that need to be undone or reversed
Conclusion
The HTML reversed attribute provides a simple way to create descending ordered lists without additional CSS or JavaScript. It automatically calculates the starting number based on the total number of list items and can be combined with the start attribute for custom numbering ranges.
436 Views
