Etiqueta <OL>
La etiqueta <ol>, permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente. Esta etiqueta es a su vez contenedora de otras etiquetas, siendo estas últimas las que componen cada uno de los elementos de los que está compuesta la lista.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li></li>, en la que se ha de especificar el texto que compone el elemento de la lista.
Una lista puede contener como elemento de lista, otra lista, es decir se pueden crear listas anidadas.
La sintaxis de la etiqueta es la siguiente.
<ol reversed start=”valor” type=”valor”>
<li>Elemento de lista</li>
<li>Elemento de lista</li>
<li> … </li>
</ol>Los atributos que pueda utilizar la etiqueta, aparte de los globales, son los siguientes.
type
El atributo type, permite especificar el tipo de orden que se de aplicar a la lista, estableciendo de esta forma que la lista se represente mediante diferentes tipos de numeración.
Los diferentes valores que puede recibir este atributo son los siguientes
| Valor | Descripción |
| 1 | Es el valor por defecto en caso de no especificarse el atributo. Realiza la numeración de las lista utilizando valores numéricos. (1,2,3…) |
| a | Establece que la numeración de la lista se realice utilizando caracteres alfabéticamente en letra minúscula. (a, b, c …) |
| A | Establece que la numeración de la lista se realice utilizando caracteres alfabéticamente en letra mayúscula. (A, B, C …) |
| i | Establece que la numeración de la lista se realice utilizando numeración en formato de números romanos en letra minúscula. (i, ii, iii, iv …) |
| I | Establece que la numeración de la lista se realice utilizando numeración en formato de números romanos en letra mayúscula. (I, II, III, IV …) |
start
El atributo start, permite indicar el valor de inicio, por el cual ha de comenzar la lista ordenada, siendo este un valor numérico, en caso de ser la lista ordenada de forma alfabética, el valor de inicio que se exprese, se corresponderá con el orden el abecedario ASCII correspondiente.
La sintaxis de la etiqueta con el atributo es la siguiente.
<ol start=”valor”>
<li>Elemento de lista</li>
<li>Elemento de lista</li>
<li> … </li>
</ol>reversed
El atributo reversed, permite indicar que la numeración u orden que se haya establecido se represente de forma inversa, si tuviéramos una lista con valor de inicio 1, 2, 3, sucesivamente, su representación al encontrarse este atributo seria 3,2,1. Es un atributo con valor booleano, en caso de aparecer el atributo en la etiqueta se aplica el valor.
La sintaxis del atributo aplicado a la etiqueta es la siguiente.
<ol reversed>
<li>Elemento de lista</li>
<li>Elemento de lista</li>
<li> … </li>
</ol>El siguiente ejemplo muestra el uso de las listas ordenadas utilizando variaciones sobre la misma.
<!DOCTYPE HTML>
<html>
<head>
<title>Ejercicios prácticos HTML5</title>
<meta charset="utf-8">
<meta name="author" content="José Sáez">
<meta name="description" content="Ejercicios prácticos HTML5">
<meta name="generator" content="www.aprendoencasa.com, Curso práctico HTML5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<p>Lista ordenada numéricamente por defecto</p>
<ol>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<p>Lista ordenada alfabéticamente</p>
<ol type="a">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
<p>Lista con todos los atributos</p>
<ol type="I" start="10" reversed>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
</body>
</html>El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la siguiente imagen.
Ejercicios y prácticas de HTML5, listas ordenadas
