HTML - reversed Attribute

The ordered lists (<ol>) tag in HTML uses the reversed attribute. When it is used, it reverses the list items so that the marks or numbers show in the reverse sequence. For instance, the first list item in an ordered list with the reversed attribute will have the highest number, and the subsequent list items will have decreasing values.

This attribute can be helpful when you want to show a countdown or sort items by decreasing value. It's a useful feature for making lists with reversed numbering for particular use cases.

Syntax

Following is the syntax of the reversed attribute −

<ol reversed />

Example

In the following example, we are demonstrating the usages of the reversed attribute within the <ol> tag, as follows −

<!DOCTYPE html>
<html>
<head>
   <title> HTML reversed Attribute</title>
   <style>
      body {
         text-align: center;
      }
   </style>
</head>
<body>
   <h1 style="color: green;">tutorials <span style="color: black">point</span>
   </h1>
   <h2>The ol reversed attribute</h2>
   <ol reversed>
      <li>Apple</li>
      <li>Banana</li>
      <li>Mango</li>
   </ol>
   <p>
      <strong>Note:</strong> The reversed attribute of the ol tag is not supported in Edge prior version 79.
   </p>
</body>
</html>

On running the above code, the output window will pop up displaying the list items in reversed order on the webpage.

Example

Considering the another scenario, where we are going to use the reversed attribute on the ordered list in the roman type.

<!DOCTYPE html>
<html>
<head>
   <title> HTML reversed Attribute</title>
   <style>
      body {
         text-align: left;
      }
   </style>
</head>
<body>
   <h1 style="color: green;">tutorials <span style="color: black">point</span>
   </h1>
   <h2>The ol reversed attribute</h2>
   <ol reversed type="I" start="10">
      <li>Apple</li>
      <li>Banana</li>
      <li>Mango</li>
   </ol>
   <p>
      <strong>Note:</strong> The reversed attribute of the ol tag is not supported in Edge prior version 79.
   </p>
</body>
</html>

When we run the above code, it will generate an output consisting of the list items displayed in roman type on the webpage.

Example

Let's look into the following example, where we are going to use the reversed attribute of the ordered list of type alphabetical order.

<!DOCTYPE html>
<html>
<head>
   <title> HTML reversed Attribute</title>
   <style>
      body {
         text-align: left;
      }
   </style>
</head>
<body>
   <h1 style="color: green;">tutorials <span style="color: black">point</span>
   </h1>
   <h2>The ol reversed attribute</h2>
   <ol reversed type="A" start="3">
      <li>Apple</li>
      <li>Banana</li>
      <li>Mango</li>
   </ol>
   <p>
      <strong>Note:</strong> The reversed attribute of the ol tag is not supported in Edge prior version 79.
   </p>
</body>
</html>

On running the above code, the output window will pop up displaying the list items displayed in the alphabetical order on the webpage.

html_attributes_reference.htm
Advertisements