Issue #10 - reversing ordered lists

HTML is so extensive that even after 20 years of writing it, I still discover attributes I’ve never heard of. The type, start, and reversed attributes are great examples of that. I only learned about them a few years ago. The 10th issue of this newsletter features all 3 attributes.

By the way, I’ve written newsletters for 10 consecutive weeks. I think now is a great time to hear what you think. Please tell me how you like it so far, what I can improve or what you want to learn about. You can contact me via e-mail or Twitter.

Thanks a lot and have a great weekend,
Manuel

View this issue in the browser.

HTMHell Newsletter Issue #10 - reversing ordered lists

You can reverse ordered lists by using the reversed attribute.

<ol reversed>
  <li>Curly Sue (1991)</li>
  <li>Uncle Buck (1989)</li>
  <li>She's Having a Baby (1988)</li>
  <li>Planes, Trains & Automobiles (1987)</li>
  <li>Ferris Bueller's Day Off (1986)</li>
  <li>Weird Science (1985)</li>
  <li>The Breakfast Club (1985)</li>
  <li>Sixteen Candles (1984)</li>
</ol>

Ordered lists

1. Curly Sue (1991)
2. Uncle Buck (1989)
3. She's Having a Baby (1988)
4. Planes, Trains & Automobiles (1987)
5. Ferris Bueller's Day Off (1986)
6. Weird Science (1985)
7. The Breakfast Club (1985)
8. Sixteen Candles (1984)

With the reversed attribute in place, the visual order of list items stays the same, but they are be numbered from high to low.

You can also combine the reversed and start attributes to change the number the list counts down from.

<ol reversed start="5">
  <li>Fifth</li>
  <li>Fourth</li>
  <li>Third</li>
</ol>

5. Fifth
6. Fourth
7. Third

Unordered lists

The attribute has no effect on unordered lists (ul), even if you change the type.

<ul reversed type="1">
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ul>

• Third
• Second
• First

Resources

• Reverse ordered lists (matuzo.at)
• Reversed attribute of ordered lists (caniuse.com)
• The Ordered List element (MDN)

Read this issue in your browser or share it with others: htmhell.dev/tips/reversing-ordered-lists/