HTML 5 Reverse Ordered Lists
Join the DZone community and get the full member experience.Join For Free
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>
<li value="3">The Simpsons
<li value="2">Stargate Atlantis
<li value="1">Stargate SG-1
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
The new markup is very simple: just add a
reversed attribute to the
ol element, and optionally provide a
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>
<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)
Since there are 5 list items in that list, the list will count down from 5 to 1.
reversed attribute is a boolean attribute. In HTML, the value may be omitted, but in XHTML, it needs to be written as:
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>Appeal to Ridicule</li>
<li>Begging the Question (Circular Logic)</li>
<!-- Items omitted here -->
<li>Bare Assertion Fallacy</li>
<li>Argumentum ad Ignorantiam</li>
Published at DZone with permission of Schalk Neethling. See the original article here.
Opinions expressed by DZone contributors are their own.