HTML reversed Attribute

Introduction

The reversed attribute is a boolean attribute on <ol> (ordered lists) that makes list markers count down instead of up. With three items and no start value, markers show 3, 2, 1 while the DOM order of <li> elements stays the same. Use it for rankings (3rd place first), countdown steps, or any descending sequence. Set element.reversed = true in JavaScript to toggle it dynamically. Not the same as the obsolete rev link attribute — see the rev guide for that distinction.

What You’ll Learn

Purpose of reversed Attribute

By default, an ordered list numbers items starting at 1 and increasing: 1, 2, 3, … The reversed attribute flips the marker direction so the first visible item gets the highest number and each following item counts down.

This is useful when the visual reading order should stay top-to-bottom but the numbers should reflect descending rank or sequence — for example, a podium list (gold, silver, bronze) labeled 3, 2, 1, or a “countdown to launch” checklist.

📝 Syntax

Add the boolean reversed attribute to an <ol>:

<ol reversed>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>
<!-- Renders as 3, 2, 1 -->

Syntax Rules

• Valid only on <ol> — not on <ul> or other elements.
• Boolean attribute: presence means true; omit for default ascending order.
• Works with start to set the first marker value before counting down.
• Works with type (1, a, A, i, I) for marker style.
• JavaScript: olElement.reversed = true or false.
• Does not reverse nested lists unless each nested <ol> has its own reversed.
• Unrelated to obsolete rev on links.

💎 Values

reversed is a boolean attribute — it has no meaningful string values:

• reversed or reversed="" or reversed="reversed" — list markers count down.
• (attribute absent) — default ascending numbering from start (default 1).

<!-- Three items, no start: 3, 2, 1 -->
<ol reversed>...</ol>

<!-- start="10" reversed: 10, 9, 8 -->
<ol start="10" reversed>...</ol>

<!-- type="A" reversed: C, B, A -->
<ol type="A" reversed>...</ol>

Applicable Elements

Normal ol vs reversed

Examples Gallery

Basic reversed lists, JavaScript toggling with element.reversed, and combining start with countdown numbering.

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

<ol id="dynamicList">
  <li>Step three</li>
  <li>Step two</li>
  <li>Step one</li>
</ol>
<button id="toggleBtn">Toggle reversed</button>

<script>
  const list = document.getElementById("dynamicList");
  document.getElementById("toggleBtn").addEventListener("click", () => {
    list.reversed = !list.reversed;
  });
</script>

<h2>Launch countdown</h2>
<ol start="10" reversed>
  <li>T-minus 10</li>
  <li>T-minus 9</li>
  <li>T-minus 8</li>
</ol>
<!-- Markers: 10, 9, 8 -->

♿ Accessibility

• Screen readers — Generally announce list position; reversed markers may still be read in DOM order. Ensure list item text is self-explanatory.
• Meaningful labels — Do not rely on numbers alone. Write clear <li> content (e.g. “Gold — Team A” not just “Team A”).
• Logical reading order — Keep li elements in the order users should read them; use reversed for number styling, not as a substitute for reordering confusing content.
• Nested lists — Apply reversed per ol when sub-lists need their own countdown.
• Not rev — Assistive tech does not treat reversed as link metadata; it only affects list presentation.

💡 Best Practices