Reverse Ordered Lists
April 23rd, 2008 by Lachlan Hunt
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>
April 23rd, 2008 at 16:43
Am I missing something, or should the last example not have start=”100″ instead of “10″?
April 23rd, 2008 at 16:51
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…
April 23rd, 2008 at 19:17
(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”
April 23rd, 2008 at 19:20
[...] reverse ordered list is one of the features introduced in HTML5. Now, I could rank beauty pageant contests from bottom [...]
April 23rd, 2008 at 19:38
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.
April 23rd, 2008 at 19:41
… with stylesheets …
April 23rd, 2008 at 20:46
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.)
April 23rd, 2008 at 22:04
Crikey, never realised that.
April 24th, 2008 at 03:24
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!
April 24th, 2008 at 06:54
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.
April 24th, 2008 at 08:19
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.
April 26th, 2008 at 06:05
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 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”.
April 27th, 2008 at 20:28
[...] films af te laten tellen van 10 naar 1. Een zogenaamde countdown. Dit artikel is een vertaling van reverse ordered lists van [...]
April 28th, 2008 at 01:41
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!
April 29th, 2008 at 12:39
[...] Plenty of opportunities for a list that starts with 10 and works to 1. WhatWG blog explains how to do reverse ordered lists. Tuesday, April 29th | [...]