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.

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.

HTML5 ha restituido los atributos start y type (que habían sido desaprovados en versiones anteriores) debido a que probaron tener un valor semántico.

El atributo compact de este elemento ha sido eliminado de la especificación de HTML5 debido a su naturaleza visual. Los autores deberían reemplazar su funcionalidad con declaraciones de hojas de estilo.

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:

  1. Encienda la computadora.
  2. Presione la tecla DEL cuando se le indique.
  3. 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:

  1. Red hot chili peppers
  2. Aerosmith
  3. Metallica
  4. The doors
  5. 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:

  1. Presiona la tecla F10.
  2. 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.

  1. Un escollo fugaz
  2. Los pros y los contras
  3. 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.