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.
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>
This entry was posted
on Wednesday, April 23rd, 2008 at 15:51 and is filed under Elements, Syntax.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
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…
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.
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.)
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!
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.
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.
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”.
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!
[...] 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 | [...]
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.
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.
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.
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.
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:
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 | [...]
August 8th, 2008 at 01:54
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.
August 14th, 2008 at 23:34
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.
August 14th, 2008 at 23:43
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.
January 16th, 2009 at 18:21
why are you posting horseshit? This isn’t working in Firefox…
January 16th, 2009 at 22:47
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.
February 19th, 2009 at 20:25
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?
February 19th, 2009 at 20:26
hmmm
I’m sorry apparently my code cannot be posted due to restrictions.
February 19th, 2009 at 21:05
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
<,>and&, respectively