Curso HTML 7.2 Listas ordenadas (ol) y tipos de numeración

Listas ordenadas en HTML

Las listas ordenadas se definen con la etiqueta <ol>. Cada elemento de la lista va dentro de una etiqueta <li>. A diferencia de las listas desordenadas (<ul>), las listas ordenadas muestran automáticamente un numerador o marcador según el tipo de numeración que especifiquemos.

Atributos principales de <ol>

type: define el tipo de numeración (números, letras, números romanos).
start: establece el valor inicial de la cuenta.
reversed: invierte el orden de la numeración.

1. Atributo `type`

Permite elegir entre varios esquemas de numeración:

Valor de type	Descripción	Ejemplo de salida
‘1’	Números arábigos (por defecto).	1., 2., 3., …
‘a’	Letras minúsculas.	a., b., c., …
‘A’	Letras mayúsculas.	A., B., C., …
‘i’	Números romanos minúsculos.	i., ii., iii., …
‘I’	Números romanos mayúsculos.	I., II., III., …

Ejemplo: diferentes tipos de numeración



  Primer ítem
  Segundo ítem
  Tercer ítem




  Elemento A
  Elemento B
  Elemento C




  Capítulo I
  Capítulo II
  Capítulo III

2. Atributo `start`

Permite indicar el número (o letra, para type='a') a partir del cual comienza la lista.

Ejemplo: iniciar en un valor distinto de 1


  Quinto punto
  Sexto punto
  Séptimo punto



  
  Opción C
  Opción D

3. Atributo `reversed`

Si se incluye, invierte la numeración: comienza desde el valor start (por defecto el número de ítems) y decrece.

Ejemplo: lista invertida


  Último ítem
  Penúltimo ítem
  Primer ítem




  Ítem 10
  Ítem 9
  Ítem 8

Anidación y estilos semánticos

Podemos anidar listas ordenadas dentro de otras para reflejar subniveles o capítulos:


  Capítulo 1
    
      Sección 1.a
      Sección 1.b
    
  
  Capítulo 2
    
      Subcapítulo I
      Subcapítulo II

Buenas prácticas y accesibilidad

Usar listas ordenadas sólo cuando el orden tenga significado.
Para navegadores antiguos, el atributo type puede no estar soportado: considerar CSS list-style-type en casos avanzados.
Evitar anidaciones excesivas para no complicar la estructura semántica.
Agregar descripciones claras en cada <li> para usuarios de lectores de pantalla.

Resumen

La etiqueta <ol> junto con sus atributos type, start y reversed ofrece control total sobre la numeración de nuestras listas. Con ejemplos claros como type='a', start='5' o reversed, podemos adaptar la salida para índices, capítulos, instrucciones paso a paso y mucho más.