HTML reversed Attribute

HTML reversed Attribute

The HTML reversed attribute is a Boolean attribute that makes an ordered list count downward instead of upward. When it is present on an <ol> element, the list markers decrease as the list progresses.

Elements That Use the reversed Attribute

The reversed attribute is used with the <ol> element.

Boolean Attribute

The reversed attribute is a Boolean attribute. Its presence makes the ordered list descend, so it does not need a value.

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

For Boolean attributes, writing a value such as reversed="false" does not restore ascending numbering. If the attribute is present, the list is reversed. To use normal ascending numbering, omit the attribute.

How reversed Works

An ordered list normally counts upward, such as 1, 2, 3. When reversed is present, the list instead counts downward.

<ol reversed>
  <li>Gold</li>
  <li>Silver</li>
  <li>Bronze</li>
</ol>

Because this list contains three list items and does not specify a start value, the markers are 3, 2, and 1. The order of the <li> elements in the HTML does not change; only their ordinal values descend.

Default Starting Value

When a reversed ordered list does not have a start attribute, its starting value is the number of list items owned by the <ol> element.

<ol reversed>
  <li>Item Five</li>
  <li>Item Four</li>
  <li>Item Three</li>
  <li>Item Two</li>
  <li>Item One</li>
</ol>

This list contains five items, so it begins at 5 and continues downward through 4, 3, 2, and 1.

Using reversed with start

The start attribute can be used with reversed when the descending list should begin with a specific integer instead of automatically using the number of list items.

<ol reversed start="10">
  <li>Item Ten</li>
  <li>Item Nine</li>
  <li>Item Eight</li>
</ol>

The list begins at 10 because the start attribute explicitly sets the starting value. The following items then continue downward as 9 and 8.

Common Mistakes

Do not use reversed="false" to create an ascending list. Because reversed is a Boolean attribute, its presence makes the list descend regardless of the text assigned to it.

Do not assume that a reversed list always begins at 1. Without a start attribute, its starting value is based on the number of list items.

Do not manually reverse the order of the <li> elements just to obtain descending markers. The reversed attribute changes the list's ordinal values without changing the document order of its items.

Do not use reversed on an unordered <ul> or <menu> element. The attribute applies specifically to <ol>.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The reversed attribute on the <ol> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the reversed Attribute

The example shows a five-item ordered list using the reversed attribute. Because no start value is specified, the browser numbers the items from 5 down to 1.

Summary

The HTML reversed Boolean attribute makes an <ol> element use descending ordinal values. If no start attribute is specified, the list begins with a value based on the number of its list items. The start attribute can be used when a different starting value is needed.