The WHATWG Blog

Please leave your sense of logic at the door, thanks!

Reverse Ordered Lists

by Lachlan Hunt in Elements, Syntax

One of the newly introduced features in HTML 5 is the ability to mark up reverse ordered lists. These are the same as ordered lists, but instead of counting up from 1, they instead count down towards 1. This can be used, for example, to count down the top 10 movies, music, or LOLCats, or anything else you want to present as a countdown list.

In previous versions of HTML, the only way to achieve this was to place a value attribute on each li element, with successively decreasing values.

<h3>Top 5 TV Series</h3>
<ol>
  <li value="5">Friends
  <li value="4">24
  <li value="3">The Simpsons
  <li value="2">Stargate Atlantis
  <li value="1">Stargate SG-1
</ol>

The problem with that approach is that manually specifying each value can be time consuming to write and maintain, and the value attribute was not allowed in the HTML 4.01 or XHTML 1.0 Strict DOCTYPEs (although HTML 5 fixes that problem and allows the value attribute)

The new markup is very simple: just add a reversed attribute to the ol element, and optionally provide a start value. If there’s no start value provided, the browser will count the number of list items, and count down from that number to 1.

<h3>Greatest Movies Sagas of All Time</h3>
<ol reversed>
  <li>Police Academy (Series)
  <li>Harry Potter (Series)
  <li>Back to the Future (Trilogy)
  <li>Star Wars (Saga)
  <li>The Lord of the Rings (Trilogy)
</ol>

Since there are 5 list items in that list, the list will count down from 5 to 1.

The reversed attribute is a boolean attribute. In HTML, the value may be omitted, but in XHTML, it needs to be written as: reversed="reversed".

The start attribute can be used to specify the starting number for the countdown, or the value attribute can be used on an li element. Subsequent list items will, by default, be numbered with the value of 1 less than the previous item.

The following example starts counting down from 100, but omits a few items from the middle of the list and resumes from 3.

<h3>Top 100 Logical Fallacies Used By Creationists</h3>
<ol reversed="reversed" start="100">
  <li>False Dichotomy</li>
  <li>Appeal to Ridicule</li>
  <li>Begging the Question (Circular Logic)</li>
  <!-- Items omitted here -->
  <li value="3">Strawman</li>
  <li>Bare Assertion Fallacy</li>
  <li>Argumentum ad Ignorantiam</li>
</ol>

↔

26 Responses to “Reverse Ordered Lists”

  2. Is “reversed” meant to imply any semantic information, or is it purely stylistic?

    What do we do when we want to add numbers to a list for stylistic purposes, but the actual semantic order is irrelevant?

    For example, in a list of ‘ten resolutions I’ve made for 2009’, the order isn’t actually important, but it looks better if there are numbers (so that people can see that there are actually 10 resolutions), and you may want the numbers to count backwards.

    However, in a ‘top 10 new year’s resolutions from our survey of 1000 people’, the order is actually significant.

    There should be a way to distinguish between these two cases…

  3. (I’m trying leave my sense of logic at the door, but it refuses to stop following me.)

    Shouldn’t it read like this instead: order=”reversed”

  5. Frankie Roberto: I think that when using ol, then the order is (by definition) significant. Even if you initially do it only because it looks good, numbers always imply some meaning for the reader (even if the author didn’t intend them to carry a meaning, no matter the way he used to mark it up in the document), especially if you use a reverse ordering.

    Using an ordered list just because it looks good is on the same level as using b and i tags for headings 😉 It probably should be possible to put numbers on an unordered list, but if you’re willing to go trough so much trouble just to get a bunch of numbers before the list items, they have to be quite important semantically.

    The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

  6. It probably should be possible to put numbers on an unordered list

    … with stylesheets …

  7. ul { list-style: decimal; } will give an unordered list numbers. IIRC it’s not possible to auto-reverse-number lists in CSS yet, though. If hixie’s got a proposal for that, it would be good to get it on www-style. (Reverse numbering is possible, having the browser figure out the start number afaik isn’t.)

  9. Why not use the syntax start=”10″ step=”-1″? This would permit both reverse ordered lists and lists of, for example, even numbers. start=”2″ step=”2″. For non-decimal lists, such as upper alpha, the later would generate B, D, F,… This would be far more powerful than a binary attribute. In addition, the proposed ol reversed would complicate my coding life. I often cut and paste code between html5 and xhtml5 files. I then hand-edit the differences, this would be one more difference to edit – the changing of reversed to reversed=”reversed” Please think this one out more carefully. Thanks!

  10. I can see the logic here, but the naming seems restrictive. Wouldn’t it be better to make the attribute “order” as Chetan suggested; then allow the values “ascending” and “descending”? This would still follow the natural order according to language (if that’s even an issue) without relying on default behaviour for half of the equation.

    I’m just thinking that if you allow people to specify one ordering method you should be able to explicitly specify the other.

  11. Dana, what’s the use case you’re trying to address? Why would a step of any value but 1 or -1 be useful?

    You can use the reversed=”reversed” (or simply reversed=””) syntax in both HTML and XHTML, so you can do that if you need to be able to copy between HTML and XHTML with minimal changes.

    Ben, there is little point in adding a new attribute to explicitly specify the default behaviour when there is only a boolean choice.

  12. Why not use the syntax start=”10? step=”-1??

    Actually, unless I’m totally off my rocker, it seems like this would complicate things. I would want to be able to use factors, prime number, and so on. I think the point of allowed “reversed” to exist is to provide a simple solution to a simple common problem. If you do in fact have the need to create a list numbered, for example “2,4,6,8” or “1,3,5,7,11,13”, then an unordered list with labels would be more appropriate. I guess it seems to me that the “step” syntax would be more appropriate in a pre- or post-processor language than the actual markup.

    I’m just thinking that if you allow people to specify one ordering method you should be able to explicitly specify the other.

    I don’t see how this could be useful. For example, with CSS, if you want to specify a different font color for a span tag, you specify it. If you don’t, you do not specify it, and it inherits it from its parent. No need to re-specify that you want to use “black” as a color when its already been specified. Likewise, if an ordered list is by default to go in ascending order, reaffirming that fact only wastes 20 bytes of data every time the page is loaded. Insignificant by itself, but significant if you have a page of “The worlds 100 favorite top ten lists”.

  14. Thanks, Lachlan. I was not clear on being able to use reversed=”reversed” in HTML5. I needed to read the “value may be omitted” more carefully and realize that this also means that the value is allowed in HTML5. And as long as the value attribute is allowed in HTML5, then I would have no use case that could not be handled by using the value attribute. I concur with Daniel – the default ascending order should not have to be specified! Thanks again!

  16. I’ve always wondered why, in XHTML, the value of attributes such as checked, selected, and reversed are the same as the attribute name instead of true | false. Reversed is even worse because it makes much more sense to call the attribute “sorted” or “order” or something similar and specify ascending or descending.

  17. I agree with Chetan and Ben on the order=”ascending|descending” proposal. We may not see any other possible values at the moment, but I’m sure they didn’t when they created checked=”checked” either. For example… imagine a list of checkboxes. Now, with the addition of Javascript, a number of developers add a ‘check all’ box. The problem is, you can only have 2 possible values for the checkbox. Checked and unchecked. But what if only a few of the checkboxes below the ‘check all’ box are checked. We don’t want to have an unchecked box because some assume that means none are checked and we can’t have it checked because people will assume that means all are checked. And it all goes back to someone not making things forward compatible. In my opinion, that is more important than backward compatibility. If you’ve read my post on backward compatibility, then you know how I feel about the subject. Forward compatibility (also discussed in my post) will make it possible to add features in the future that could work in browsers that never knew the feature would be implemented. I believe if we want to make the web a better place, this is how we must go about it.

  18. My apologies, I forgot to include this in my previous post. I’m unsure as to where I can find the information, so if someone could post that as well as the answer, it would be greatly appreciated. But what I’m wondering is will search engines recognize this appropriately? Currently, content near the top of the page (in the source, not the outputted design) is looked higher upon than content lower in the page. Although minimal in small lists, this could have a huge impact on a large list of links that are in descending/reversed order unless the search engine reverses the list before it assigns a value to each of the keywords/links.

  19. why are you posting horseshit? This isn’t working in Firefox…

  20. knorrd, this is a new feature introduced in HTML5. There are lots of features in HTML5 that haven’t yet been implemented in browsers. It will take some time for everything to be implemented.

  21. hi!
    I’ve read all the comments above and I still don’t understand how can I do an unordered list. Probably it has to be implemented in browsers, but for the moment I am struggling with a problem.
    I have the following code:

    <a href=””> by <a href=””>

    How can I make it work?

  23. Alyna, I don’t understand your question. An unordered list is done with the <ul> element.

    BTW, you can post code by marking up all of the <, > and & characters as &lt;, &gt; and &amp;, respectively

  25. I’m looking forward to this implementation ( I think… maybe I’ll end up eating my words). I do wish they include a way to make geometric increments in either direction , i.e.: STEP =”* -3″ or STEP=”* 2″… ( just something for the wish-list.. in case the W3C is reading this… ==:) )

    In reply Frankie R.’s comment:
    If your concerns are merely stylistic they should be addressed via CSS and NOT HTML. Since your list has no real order (tho some new years resultants may actually have an order of importance), I would chose an UL, then use css to change the list style to decimal, roman , upper roman, etc.

  26. Isn’t the big issue here that it won’t degrade?

    Everything showing HTML5 will display the in one order, whereas IE6 and the like will show the list in the wrong order?

    Or am I wrong?