Etiqueta ol en HTML: listas ordenadas y numeración

La etiqueta <ol> en HTML representa una lista en la que el orden de los elementos es significativo. Úsala para los pasos de una receta, los puestos de una clasificación o las tareas que deben atenderse por prioridad: cambiar su posición cambia lo que comunicas. Cada entrada se escribe dentro de un <li>; el navegador suele mostrar un marcador numérico delante de ella.

<ol start="3">
  <li>Guarda el archivo.</li>
  <li>Ábrelo en el navegador.</li>
</ol>

El resultado muestra 3. Guarda el archivo. y 4. Ábrelo en el navegador. start="3" permite continuar una secuencia anterior sin escribir los números como parte del texto. Si retiras ese atributo, los marcadores empiezan en 1 y continúan en 2.

Sintaxis y contexto válido

Escribe <ol>, sus entradas <li> y el cierre </ol>. Ambas etiquetas de <ol> son obligatorias. Los ejemplos cierran también cada <li> para hacer visibles sus límites, aunque HTML permite omitir ese cierre en determinadas condiciones.

Puedes colocar <ol> donde se admite contenido de flujo, por ejemplo en <body>, <section>, <div> o un <li>. No lo insertes dentro de un párrafo <p>. Sus hijos directos pueden ser elementos <li> y elementos de soporte de scripts, <script> o <template>; estos últimos no constituyen entradas de la lista. Un título o un párrafo explicativo van fuera de <ol> o dentro de una entrada, según su función. Estas reglas están definidas en la sección de <ol> del HTML Living Standard.

Una sublista pertenece al <li> que desarrolla. Colócala antes de su cierre, así:

<ol>
  <li>
    Prepara el documento.
    <ol>
      <li>Escribe el título.</li>
      <li>Añade el contenido.</li>
    </ol>
  </li>
  <li>Revisa la página.</li>
</ol>

La lista interior tiene su propia numeración. Ponerla directamente bajo el <ol> exterior, como hermana de los <li>, es incorrecto aunque parezca funcionar visualmente. Consulta la guía de <li> para las reglas de sus entradas y cierres.

Pasos, posiciones y prioridades: ol frente a ul

En una receta, «mezclar», «servir» y «refrigerar» expresan instrucciones cuya secuencia importa. En una clasificación, el primer puesto no equivale al tercero. Una lista de prioridades también justifica <ol> si empezar por otra entrada cambia la decisión.

Una lista de materiales, como yogur, avena y fruta, normalmente usa <ul>: reorganizarla no cambia qué necesitas. Elige el contenedor por esa diferencia de significado. Añadir números con CSS a una lista de materiales no la convierte en una secuencia de instrucciones.

Start, reversed y value: cómo controlar los números

Los atributos de <ol> controlan el comienzo, la dirección y la notación. El atributo value pertenece a <li>.

• start establece el número inicial con un entero, como 3, 0 o -2. No escribas start="tres" ni start="3.5". Sin start, una lista ascendente comienza en 1; una descendente comienza en la cantidad de entradas que contiene.
• reversed hace que la cuenta descienda. No cambia el orden de los elementos en el documento: el primer texto sigue siendo el primero. Puedes combinarlo con start para fijar el punto de partida.
• value en un <li> fija el ordinal de esa entrada. Las siguientes continúan desde ese valor, sumando uno o restando uno si hay reversed. No afecta a las viñetas de <ul>. MDN explica el alcance de li value.

reversed es booleano: se activa por su presencia. Escribe <ol reversed> para activarlo y retira el atributo para desactivarlo. reversed="false" conserva la cuenta descendente y no es un valor válido para este atributo. La regla de atributos booleanos de HTML distingue presencia y ausencia.

Ejemplo práctico: una receta y una clasificación descendente

Guarda este documento como listas-ordenadas.html con codificación UTF-8 y ábrelo en un navegador. No necesita servidor, CSS, JavaScript ni otros archivos.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Receta y clasificación del taller</title>
  </head>
  <body>
    <h1>Receta y clasificación del taller</h1>

    <h2>Ingredientes del vaso de yogur</h2>
    <ul>
      <li>Yogur natural.</li>
      <li>Avena.</li>
      <li>Fruta cortada.</li>
    </ul>

    <h2>Preparación</h2>
    <ol>
      <li>Pon el yogur en un vaso.</li>
      <li>Añade la avena y mezcla.</li>
      <li>Coloca la fruta encima y sirve.</li>
    </ol>

    <h2>Clasificación ficticia: puestos seleccionados</h2>
    <p>Mostramos los puestos 5, 3 y 2; los puestos 4 y 1 se omiten.</p>
    <ol reversed start="5">
      <li>Equipo Limón.</li>
      <li value="3">Equipo Naranja.</li>
      <li>Equipo Mango.</li>
    </ol>
  </body>
</html>

1. Observa los ingredientes con viñetas y la preparación con los números 1, 2 y 3. Los números pertenecen a los marcadores, no al texto que escribiste en cada entrada.
2. Comprueba la clasificación: Limón lleva el 5, Naranja el 3 y Mango el 2. value="3" salta el puesto 4; después la cuenta sigue descendiendo desde 3.
3. Retira value="3": verás 5, 4 y 3. Retira además start="5", conservando reversed: las tres entradas aparecerán como 3, 2 y 1. Actualiza también el párrafo explicativo al cambiar los puestos.
4. Prueba el ejemplo mínimo sustituyendo el <ol> de preparación por el bloque inicial. Reduce la ventana y comprueba que el texto sigue legible. Todos estos resultados se mantienen con JavaScript desactivado.

Si cambias el <ol> de preparación por <ul> y su cierre correspondiente, aparecerán viñetas y el marcado dejará de expresar una secuencia ordenada. Si retiras solo las etiquetas <ol> y </ol>, los <li> quedan sin un contenedor válido: conservar texto o marcadores visibles no corrige esa estructura.

Type, atributos globales y CSS

type permite elegir una notación cuando esta forma parte de la referencia a las entradas, por ejemplo «apartado IV». Sus valores son:

El valor de start sigue siendo un entero decimal: <ol type="I" start="4"> comienza en IV, no se escribe start="IV". Para cambios solo visuales, utiliza la propiedad CSS list-style-type. MDN distingue la notación de type de la presentación con CSS.

id, class y lang son atributos globales, distintos de start, reversed y type. Desde JavaScript, HTMLOListElement.start, .reversed y .type son propiedades DOM relacionadas con esos atributos; no son requisitos para crear la lista.

Errores frecuentes y accesibilidad

No escribas números manualmente dentro de párrafos ni los dupliques en <li>: al insertar un paso, podrían dejar de coincidir con su posición. Tampoco uses <ol> únicamente para conseguir cierta sangría o tamaño de marcador.

Una lista nativa expone su estructura a las tecnologías de asistencia. <ol> tiene el rol implícito list y sus entradas el de listitem; no necesitas añadir roles redundantes. ARIA en HTML documenta esta relación. El anuncio de números y cantidad de elementos depende de la combinación de navegador y lector de pantalla.

¿Ol se convierte en ul al quitar los números con CSS? No. list-style-type: none oculta los marcadores, pero el elemento HTML sigue representando orden. Comprueba que ese orden sea comprensible y que la lista se reconozca en las tecnologías de asistencia utilizadas; no supongas un anuncio idéntico al personalizarla.

¿Cómo empiezo en otro número? Usa start en <ol> para toda la secuencia y value en <li> para cambiarla desde una entrada concreta. Si no aparecen números, revisa primero el CSS de la lista y de sus entradas, y después que cada <li> tenga el contenedor correcto.

Compatibilidad y fuentes

Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica <ol> como ampliamente disponible. Sus datos de compatibilidad de <ol> registran start, type y reversed en los navegadores actuales; reversed figura desde Chrome 18, Firefox 18 y Safari 6. Los ejemplos utilizan HTML nativo y no dependen de una API de scripts.

El HTML Living Standard fija significado, contenido permitido y numeración; MDN complementa la explicación y el soporte. <ul> organiza entradas sin orden significativo y <li> representa cada entrada de cualquiera de las dos listas.