Tip: Create a descending list of numbered items

Webdev, HTML · Jun 22, 2021

Did you know there's an easy way to create a descending list of numbered items with pure HTML? The only thing you'll need is the reversed attribute. This boolean attribute is specific to ol elements and specifies that the list's elements are in reverse order (i.e. numbered from high to low).

<ol reversed>
  <li>My third favorite</li>
  <li>My second favorite</li>
  <li>My absolute favorite</li>
</ol>
<!--
  3. My third favorite
  2. My second favorite
  1. My absolute favorite
-->

Additionally, you can combine reversed with the start attribute which is an integer specifying the initial value of the list counter. For example, if you wanted to display the numbers 6 through 4 in a reversed 3-item list, you would simply add start="6".

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Tips & Tricks

    Snippet collection

    A collection of quick tips and tricks to level up your coding skills one step at a time.

  • Tip: Lazy load images in HTML

    HTML, Webdev

    Did you know you can use a native HTML attribute to add lazy load to images? Learn all you need to know with this quick tip.

  • Tip: Customize the names of downloadable files

    HTML, Webdev

    Learn what HTML5 attribute you can use to customize the names of your downloadable files with this quick tip.

  • Tip: Prefetching resources in the browser

    HTML, Webdev

    Resource prefetching is a great technique to improve perceived page speed on your website and one that requires little to no effort. Learn how to use it today.