Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro, es importante el orden de cada elemento del índice.
En todos estos casos, la lista más adecuada es la lista ordenada, que se define mediante la etiqueta <ol>. Los elementos de la lista se definen mediante la etiqueta <li>, la misma que se utiliza en las listas no ordenadas.
| Etiqueta | <ol> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | – |
| Tipo de elemento | Bloque |
| Descripción | Se emplea para definir listas ordenadas |
El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:
<html> <head><title>Esquema de un evento social</title></head> <body> <h1>Esquema de un evento social modo Tupac Bruch</h1> <ol> <li>Invitar a las personas</li> <li>Esperar a que traigan cosas</li> <li>Cortar la luz para que se vayan</li> <li>Despedirlos cordialmente</li> <li>Una vez que se fueron, disfrutar de la fiesta</li> </ol> </body> </html>
En el navegador la lista ordenada se ve de la siguiente manera:
El navegador muestra la lista de forma muy parecida a las listas no ordenadas, salvo que en este caso no se emplean viñetas gráficas en los elementos, sino que se numeran de forma consecutiva. El tipo de numeración empleada también se puede modificar aplicando hojas de estilos CSS a los elementos de la lista.