<ol>

<ol> (ordered list, lista ordenada) es el elemento HTML que agrupa ítems donde cambiar el orden altera el significado. La “o” del nombre es la clave: el orden cuenta. Los casos de uso son inmediatos: los pasos de una receta (primero hervir, después colar, no al revés), las instrucciones de instalación de un software, un ranking (el puesto 1 es distinto al puesto 3), una secuencia de eventos históricos. Si reordenás los ítems y el contenido pierde sentido o se vuelve incorrecto, estás ante una <ol>.

La diferencia con <ul> no es visual — es semántica. Ambas pueden verse idénticas con CSS, pero el elemento elegido le comunica al lector de pantalla, al motor de búsqueda y a cualquier procesador del documento si la secuencia importa. Un lector de pantalla anuncia “lista de N ítems” para ambas, pero el número visible ya transmite orden. Usar <ol> para una lista de compras solo porque “querés números” es engañar al documento: el HTML declara que cambiar el orden cambia el significado, cuando no lo hace. La elección entre <ul> y <ol> es una decisión de contenido, no de estilo.

La numeración la genera el navegador automáticamente — no hace falta escribir “1.”, “2.”, etc. en el HTML. Eso implica que si insertás o eliminás un ítem, todos los números se recalculan solos. Los atributos start, type y reversed dan control sobre cómo se muestra esa numeración.

Cómo funciona

<ol> es un elemento de bloque que contiene <li> como hijos directos. El navegador los numera empezando en 1 (por defecto) y avanzando de uno en uno. La numeración se hace por CSS Counter internamente — el navegador mantiene un contador que se incrementa con cada <li>. Los atributos start, type y reversed modifican ese contador.

El estilo de la numeración (tamaño, color, posición, separación) se controla con CSS: list-style, list-style-type, counter-reset, counter-increment.

Modelo de contenido

El único hijo directo válido de <ol> es <li>. No se puede poner texto suelto ni otros elementos directamente dentro del <ol>. Las listas anidadas van dentro de un <li>. Display por defecto: block.

Sintaxis

<!-- Lista ordenada básica -->
<ol>
  <li>Hervir el agua</li>
  <li>Agregar la pasta</li>
  <li>Colar y servir</li>
</ol>

<!-- Empezar desde un número distinto con start -->
<ol start="4">
  <li>Colar la pasta</li>
  <li>Agregar la salsa</li>
  <li>Servir</li>
</ol>

<!-- Numeración en orden inverso con reversed -->
<ol reversed>
  <li>Tercer lugar</li>
  <li>Segundo lugar</li>
  <li>Primer lugar</li>
</ol>

<!-- Numeración con letras mayúsculas con type -->
<ol type="A">
  <li>Opción A</li>
  <li>Opción B</li>
  <li>Opción C</li>
</ol>

Atributos

start

Fija el número de inicio de la lista. El valor es siempre un entero, sin importar el type elegido.

<!-- La lista empieza en 4 (útil para continuar una lista anterior) -->
<ol start="4">
  <li>Paso cuatro</li>
  <li>Paso cinco</li>
</ol>

Caso de uso típico: dos bloques de código o dos fragmentos de prosa que son partes de una misma secuencia numerada; el segundo bloque usa start para continuar la numeración donde dejó el primero.

type

Cambia el sistema de numeración visible:

<ol type="I">
  <li>Introducción</li>
  <li>Desarrollo</li>
  <li>Conclusión</li>
</ol>

Nota: type en <ol> sigue vigente (a diferencia del type de <ul>, que es legacy). Sin embargo, para documentos que no dependen del tipo de numeración por su semántica, se prefiere controlarlo con CSS (list-style-type).

reversed

Atributo booleano que invierte la numeración: el último ítem recibe el número 1, el primero recibe N.

<!-- Rankings descendentes -->
<ol reversed>
  <li>Tercer lugar</li>
  <li>Segundo lugar</li>
  <li>Primer lugar</li>
</ol>

Accesibilidad

El rol implícito de <ol> es list. Los lectores de pantalla anuncian la cantidad de ítems al entrar. Al igual que <ul>, aplicar list-style: none con CSS puede eliminar el rol list en Safari + VoiceOver; si quitás el estilo y necesitás que siga siendo una lista accesible, agregá role="list" explícitamente.

Cuándo usar <ol> vs. <ul>

La pregunta clave: ¿cambiar el orden cambia el significado o el resultado?

Notas, gotchas e interacción

• type de <ol> vs. type de <ul>. En <ul>, el atributo type es legacy (usar CSS). En <ol>, type sigue siendo válido en HTML5 — pero igual se puede hacer con CSS para separar presentación de estructura.
• start acepta solo enteros, independientemente del type. Si usás type="A" y start="3", la lista empieza en “C”.
• Listas que empiezan a mitad de una secuencia. Usá start cuando un <ol> es la continuación de otro: sin él, cada lista reinicia en 1 aunque el contenido sea parte de la misma secuencia.
• Texto o elementos sueltos como hijos directos son inválidos. Solo <li.

Vigente / legacy

<ol> está completamente vigente. El atributo compact es legacy desde HTML5 (nunca tuvo implementación real en navegadores modernos). El atributo type en <ol> sigue vigente (caso diferente al type de <ul>).