Invertir el orden de listas ol (ordenadas/numeradas)

¿Alguna vez has querido invertir el orden de una lista numerada en HTML? Es decir, que en lugar de comenzar por 1 e ir subiendo de valor en cada elemento de la lista ol, comience a contar bajando hasta llegar a 1. Si utilizas una lista ol es porque el orden de lo elementos de la lista te importa, y puede que te importe presentarlos en orden inverso. En versiones anteriores a HTML5 esto se podía hacer únicamente utilizando el atributo value especificado en cada uno de los elementos <li>. Por ejemplo:

<h1>Las 5 mejores películas del año</h1>
<ol>
  <li value="5">Item 5</li>
  <li value="4">Item 4</li>
  <li value="3">Item 3</li>
  <li value="2">Item 2</li>
  <li value="1">Item 1</li>
</ol>

No hay ningún problema en esto, salvo el incremento de código y de trabajo necesario para escribirlo y/o mantener dicho código. Además, el atributo value dejó de estar permitido en documentos HTML 4.01 o XHTML 1.0 Strict. HTML5 solventa este último problema, ya que vuelve a aceptar el atributo value en los elementos li de las listas ol. Pero mucho mejor, HTML5 incorporá el atributo reversed para las listas ol de forma que si es especificado el navegador cuenta el total de los elementos de la lista y comienza a contar hacia atrás desde el total hasta llegar a 1.

<h1>Las 5 mejores películas del año</h1>
<ol reversed>
  <li>Item 5</li>
  <li>Item 4</li>
  <li>Item 3</li>
  <li>Item 2</li>
  <li>Item 1</li>
</ol>

La lista anterior comenzará con el número 5 e irá descendiendo hasta el número 1. El atributo reversed es un atributo tipo bool (verdadero/falso). En XHTML debe escribirse como reversed="reversed".

De forma opcional se puede especificar el atributo start para decir al navegador el número desde el cuál debe comenzar la cuenta atrás.

<h1>Las 10 mejores películas del año</h1>
<ol reversed start="10">
  <li>Item 10</li>
  <li>Item 9</li>
  <li>Item 8</li>
  <li>Item 7</li>
  <li>Item 6</li>
</ol>

También se puede especificar el atributo value en uno de los elemento li.Los siguientes elementos li seguirán contando hacia atrás comenzando desde el valor especificado en el atributo value anterior. Por ejemplo, la siguiente lista comienza por 10, luego 9, luego 5, 4 y3:

<h1>Las 10 mejores películas del año</h1>
<ol reversed start="10">
  <li>Item 10</li>
  <li>Item 9</li>
  <li value="5">Item 5</li>
  <li>Item 4</li>
  <li>Item 3</li>
</ol>

Puedes ver también como hacer que una lista ol comience por un número distinto de 1 y cómo dar estilo a una lista ol con CSS.