The HTML reversed attribute
The HTML reversed attribute numbers an <ol> list in descending order, for example 5, 4, 3, 2, 1. It is a boolean attribute written as <ol reversed>. The list starts at its item count unless you set start.
Overview
The HTML reversed attribute makes an <ol> ordered list count down instead of up. It is a boolean attribute, so writing <ol reversed> is enough, and the browser numbers the items 3, 2, 1 rather than 1, 2, 3.
Without a start attribute, a reversed list begins at the number of items it contains, so four items are numbered 4, 3, 2 and 1. The count updates when items are added with JavaScript, and items hidden with display: none are not counted.
Adding start sets the first number yourself, and the list keeps counting down past zero if it has to. In our Chrome test, <ol reversed start="2"> with four items produced 2, 1, 0 and -1. An <li> with a value attribute resets the count at that item, and the items after it continue downward.
The attribute only changes the numbers. The items stay in source order, so write them in the order they should be read, top to bottom. The type attribute still applies, and a reversed list of three items with type="i" shows iii, ii and i.
Syntax
<ol reversed>
<li>Bronze</li>
<li>Silver</li>
<li>Gold</li>
</ol>Values
| Value |
|---|
| A boolean attribute, true when present. |
Example
<p>A reversed list of three medals</p>
<ol reversed>
<li>Bronze</li>
<li>Silver</li>
<li>Gold</li>
</ol>
<p>A reversed list with start="10"</p>
<ol reversed start="10">
<li>Ten</li>
<li>Nine</li>
<li>Eight</li>
</ol>Best practices
- Use
reversedfor countdowns and rankings instead of typing the numbers by hand. - Write the items in the order people should read them. Only the numbers change.
- Set
startexplicitly when the first number must stay fixed as items are added or removed. - Toggle the attribute with the
reversedproperty in JavaScript, not withsetAttribute('reversed', 'false').
Frequently asked questions
What does the reversed attribute do on an ol element?
Where does a reversed list start counting?
Can a reversed list go below zero?
start=2 and four items, the numbers are 2, 1, 0 and -1.How do I turn off reversed numbering?
reversed=false keeps it on, because a boolean attribute is true whenever it is present, while setting list.reversed to false in JavaScript removes it.