<ol>: el elemento de lista ordenada de HTML

Pruébalo

<ol>
  <li>Mezcla la harina, el polvo de hornear, el azúcar y la sal.</li>
  <li>En otro bol, mezcla los huevos, la leche y el aceite.</li>
  <li>Revuelve hasta unir ambas mezclas.</li>
  <li>Llena tres cuartas partes de cada molde para muffins.</li>
  <li>Hornea durante 20 minutos.</li>
</ol>

li {
  font:
    1rem "Fira Sans",
    sans-serif;
  margin-bottom: 0.5rem;
}

Atributos

Este elemento también acepta los atributos globales.

compact

Este atributo booleano indica que la lista debería mostrarse con un estilo compacto. La interpretación de este atributo depende del navegador. Usa CSS en su lugar: para lograr un efecto similar al del atributo compact, puedes usar la propiedad CSS line-height con un valor de 80%.

reversed

Este atributo booleano especifica que los elementos de la lista están en orden inverso. Los elementos se numeran de mayor a menor.

start

Un número entero que indica el valor inicial para la numeración de la lista. Siempre es un número arábigo (1, 2, 3, etc.), incluso cuando el type de numeración use letras o números romanos. Por ejemplo, para empezar a numerar los elementos desde la letra "d" o el número romano "iv", usa start="4".

type

Establece el tipo de numeración:

• a para letras minúsculas
• A para letras mayúsculas
• i para números romanos en minúscula
• I para números romanos en mayúscula
• 1 para números (valor predeterminado)

El tipo especificado se aplica a toda la lista, salvo que se use otro atributo type en un elemento <li> contenido en ella.

Nota: A menos que el tipo de numeración de la lista sea relevante (como en los documentos legales o técnicos, donde se hace referencia a los elementos por su número o letra), usa en su lugar la propiedad CSS list-style-type.

Notas de uso

Por lo general, los elementos de una lista ordenada se muestran precedidos de un marcador, como un número o una letra.

Los elementos <ol> y <ul> (o su sinónimo <menu>) se pueden anidar a cualquier nivel de profundidad, alternando entre <ol>, <ul> (o <menu>) según haga falta.

Tanto <ol> como <ul> representan una lista de elementos. La diferencia es que en <ol> el orden es relevante. Por ejemplo:

• Pasos de una receta
• Indicaciones de una ruta paso a paso
• La lista de ingredientes en orden decreciente de proporción en las etiquetas de información nutricional

Para decidir qué lista usar, prueba a cambiar el orden de los elementos: si el significado cambia, usa <ol>; si no, puedes usar <ul>, o <menu> si tu lista es un menú.

Ejemplos

Ejemplo básico

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

Resultado

Uso de números romanos

<ol type="i">
  <li>Introducción</li>
  <li>Lista de agravios</li>
  <li>Conclusión</li>
</ol>

Resultado

Uso del atributo start

<p>Puestos de los participantes que no llegaron al podio:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin' Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

Resultado

Listas anidadas

<ol>
  <li>primer elemento</li>
  <li>
    segundo elemento
    <!-- ¡la etiqueta de cierre </li> no está aquí! -->
    <ol>
      <li>primer subelemento del segundo elemento</li>
      <li>segundo subelemento del segundo elemento</li>
      <li>tercer subelemento del segundo elemento</li>
    </ol>
  </li>
  <!-- Aquí está la etiqueta de cierre </li> -->
  <li>tercer elemento</li>
</ol>

Resultado

Lista no ordenada dentro de una lista ordenada

<ol>
  <li>primer elemento</li>
  <li>
    segundo elemento
    <!-- ¡la etiqueta de cierre </li> no está aquí! -->
    <ul>
      <li>primer subelemento del segundo elemento</li>
      <li>segundo subelemento del segundo elemento</li>
      <li>tercer subelemento del segundo elemento</li>
    </ul>
  </li>
  <!-- Aquí está la etiqueta de cierre </li> -->
  <li>tercer elemento</li>
</ol>

Resultado

Resumen técnico

Especificaciones

Compatibilidad con navegadores

Véase también

• Otros elementos HTML relacionados con listas: <ul>, <li>, <menu>
• Propiedades CSS que pueden resultar especialmente útiles para dar estilo al elemento <ol>:
  • la propiedad list-style, para elegir cómo se muestra la numeración
  • contadores CSS, para gestionar listas anidadas complejas
  • la propiedad line-height, para simular el atributo obsoleto compact
  • la propiedad margin, para controlar la sangría de la lista