_Order list attribute is used to set order indescending order

HTML ol reversed Attribute

The HTML <ol> reversed Attribute is a Boolean Attribute and used to ordered the list in Descending Order(9, 8, 7, 6 …..) instead of ascending order(1, 2, 3 ….).

Table of Contents Show

HTML ol reversed Attribute
HTML <ol> reversed Attribute
HTML <ol> reversed Attribute
<ol>: The Ordered List element
HTML Ordered List | HTML Numbered List
Summary of the “reversed” Attribute

Syntax:

<ol reversed> <li> Content... </li> <li> Content... </li> ... <li> Content... </li> </ol>

Example:

html

<!DOCTYPE html>

<html>

<head>

<title>reversed attribute</title>

<style>

h2,

h2 {

text-align: center;

}

</style>

</head>

<body>

<h2 style="color:green;font-style:italic;">

GeeksforGeeks

</h2>

<h2 style="color:green;font-style:italic;">

HTML ol reversed attribute

</h2>

<p>List of all computer Subjects are</p>

<ol reversed>

<li>Data Structures</li>

<li>Operating System</li>

<li>python programming</li>

<li>DBMS</li>

<li>Computer Network</li>

</ol>

</body>

</html>

Output:

Supported Browsers:

Google Chrome
Firefox
Opera
Safari

Article Tags :

HTML

Web Technologies

HTML-Attributes

Practice Tags :

HTML

Read Full Article

HTML <ol> reversed Attribute

❮ HTML <ol> tag

Example

Descending list order:

<ol reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself »

HTML <ol> reversed Attribute

HTMLWeb DevelopmentFront End Technology

The reversed attribute of the <ol> element in HTML is used to set reversed ordering of list items in an ordered list. It displays the numbering in descending order and introduced in HTML5.

Following is the syntax −

Let us now see an example to implement the reversed attribute of the <ol> element −

<ol>: The Ordered List element

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

Content categories	Flow content, and if the <ol> element's children include at least one <li> element, palpable content.
Permitted content	Zero or more <li>, <script> and <template> elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	list
Permitted ARIA roles	directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM interface	HTMLOListElement

HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:

Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Romal Number (i ii iii)
Capital Alphabet (A B C)
Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type	Description
Type "1"	This is the default type. In this type, the list items are numbered with numbers.
Type "I"	In this type, the list items are numbered with upper case roman numbers.
Type "i"	In this type, the list items are numbered with lower case roman numbers.
Type "A"	In this type, the list items are numbered with upper case letters.
Type "a"	In this type, the list items are numbered with lower case letters.

Summary of the “reversed” Attribute

As mentioned, using the new reversed attribute, you can tell the browser that the numbering for the list items should display in descending order, instead of the default ascending.

At first, this confused me. I was under impression that this attribute would actually physically reverse the contents of the list. But that’s not the case. The items will still appear in the same order as they appear in the markup, but the numbers will begin with the highest. So if you have 10 list items, then the first list item will display with a number 10, the second with a number 9, and so forth.

The syntax is simple, you just add the reversed attribute to any <ol> element. This attribute is a Boolean attribute, so it doesn’t take any value.

The code (as if you needed an example!) looks like this:

<ol reversed> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>List item four</li> <li>List item five</li> </ol>

The result in the browser would be: