Elemento ol
Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Descripción
El elemento ol
representa una lista ordenada de ítems que, en contraste con las listas no ordenadas (elemento ul
), produce un significado diferente si el orden de los ítems es alterado. Los ítems de ambas listas, ordenadas y no ordenadas, son representados por el elemento li
.
Ejemplos
El siguiente ejemplo muestra un uso muy básico del elemento ol
. Resulta fácil notar cómo el significado se vería profundamente alterado si el orden de los ítems fuera cambiado.
<p>Procedimiento para ingresar a la configuración:</p>
<ol>
<li>Encienda la computadora.</li>
<li>Presione la tecla <kbd>DEL</kbd> cuando se le indique.</li>
<li>Ingrese la contraseña</li>
</ol>
Procedimiento para ingresar a la configuración:
- Encienda la computadora.
- Presione la tecla DEL cuando se le indique.
- Ingrese la contraseña
Atributos
Atributos específicos
reversed
Un valor booleano que indica si el orden en la lista es ascendente o descendente. Si el atributo toma los valores "reversed" o la cadena vacía (""), o si está simplemente presente (sin valor alguno), la lista tiene un orden descendente.
Ejemplo
<p>Estas son mis 5 bandas de rock favoritas:</p>
<ol reversed>
<li>Red hot chili peppers</li>
<li>Aerosmith</li>
<li>Metallica</li>
<li>The doors</li>
<li>Rolling stones</li>
</ol>
Estas son mis 5 bandas de rock favoritas:
- Red hot chili peppers
- Aerosmith
- Metallica
- The doors
- Rolling stones
start
Un número que especifica en valor ordinal del primer ítem en la lista.
Ejemplo
<p>Ahora continúa con las siguientes instrucciones:</p>
<ol start="8">
<li>Presiona la tecla <kbd>F10</kbd>.</li>
<li>Confirma la salida</li>
</ol>
Ahora continúa con las siguientes instrucciones:
- Presiona la tecla F10.
- Confirma la salida
type
El tipo de símbolos a usar en las viñetas. Existen cinco posibles valores, todos insensibles a mayúsculas/minúsculas:
- 1: enteros (1, 2, 3...).
- a: letras minúsculas (a, b, c...).
- A: letras mayúsculas (A, B, C...).
- i: números romanos en minúsculas (i, ii, iii...).
- I: números romanos en mayúsculas (I, II, III...).
Aunque este atributo pueda parecer meramente visual, tiene un significado vital en casos en que otras partes del documento se refieren a un ítem específico de la lista. En tales casos la referencia puede hacerse nombrando la viñeta.
Ejemplo
<p>... Presta especial atención al capítulo III.</p>
<ol type="I">
<li>Un escollo fugaz</li>
<li>Los pros y los contras</li>
<li>Como el señor guste</li>
</ol>
... Presta especial atención al capítulo III.
- Un escollo fugaz
- Los pros y los contras
- Como el señor guste
compact
Un valor booleano que indica si los ítems de la lista deberían mostrarse en modo compacto. Si el atributo está presente, el modo compacto será habilitado.
Este atributo se ha vuelto obsoleto en HTML5 y su uso ya no es válido. Se alienta a los autores a usar hojas de estilo en su lugar.
Ejemplo
<ol compact>
Atributos globales
Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.
Eventos
Eventos globales
Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.