Crear listas ordenadas HTML con la etiqueta ol-

Las listas ordenadas HTML, también conocidas como listas numeradas HTML y opuestas a las listas desordenadas, estructuran el contenido jerárquica y alfanuméricamente. Cada lista ordenada se inicia con la etiqueta <ol> en HTML y se cierra con la etiqueta</ol>. La ventaja principal de las listas numeradas HTML es una mayor facilidad de lectura, así como un diseño claro de la página web.

¿Qué es una lista ordenada HTML?

Una lista ordenada HTML es una lista ordenada en documentos HTML que contiene una secuencia numerada de elementos. Las listas de este tipo se crean con la etiqueta <ol> (Ordered List en inglés) y cada elemento dentro de la lista se marca con la etiqueta <li> (List Item en inglés). Por defecto, los elementos individuales de HTML <ol> se etiquetan con números ascendentes, pero también existen otras opciones de enumeración, como pueden ser letras o números romanos.

Las listas numeradas HTML se caracterizan por presentar un orden de enumeración fijo, significativo y jerárquico. Los puntos no pueden ni deben seguirse unos a otros de manera arbitraria, sino que, a partir de la lógica de su orden, transmiten un significado semántico.

¿Por qué son importantes las listas ordenadas HTML para el SEO?

La estructura clara de los documentos HTML desempeña un papel importante en la optimización para motores de búsqueda y en la accesibilidad de la página web. Un texto significativo, lógico y variado es tan importante para la evaluación y captación de contenidos como la calidad del contenido, las palabras clave y las metaetiquetas HTML correctas. Las listas ordenadas HTML son uno de los elementos de diseño más importantes de los que dispone HTML, junto con los encabezados, los subtítulos y las negritas.

¿Cuándo se usan las listas numeradas en HTML?

Los usos más comunes de las listas numeradas HTML son:

• Guías paso a paso/tutoriales
• Listas clasificadas/listas de “lo mejor de”
• Procesos o secuencias de pasos o tareas
• Enumeraciones jerárquicas (por ejemplo, de ingredientes de recetas)

¿Cómo se puede crear una lista ordenada en HTML?

Para dar a tus textos una estructura clara con elementos de lista ordenados, necesitas las siguientes HTML Tags:

• <ol>: marca el inicio de una lista ordenada
• </ol>: marca el final de una lista ordenada
• <li>: introduce un elemento de la lista
• </li>: cierra un elemento de la lista

La sintaxis de una lista ordenada es la siguiente:

<ol> 
<li>Primer elemento de la lista</li> 
<li>Segundo elemento de la lista</li> 
<li>Tercer elemento de la lista</li> 
<li>Cuarto elemento de la lista</li> 
<li>...</li> 
</ol>

A menos que se especifique lo contrario en el documento HTML, los navegadores etiquetarán por defecto la lista con números arábigos en orden ascendente.

¿Cómo se puede cambiar la enumeración de <ol> en HTML?

Si deseas definir el tipo de enumeración o el valor de inicio, vas a necesitar los atributos HTML especiales. Con ellos, puedes definir una enumeración con números y letras, con un valor de inicio o en orden inverso.

Establecer el tipo de enumeración con type

Para definir el tipo de enumeración, añada el atributo type a la etiqueta <ol> en HTML de la siguiente manera:

<ol type="X"> 
<li>Primer elemento de la lista</li> 
<li>Segundo elemento de la lista</li> 
<li>...</li> 
</ol>

Puedes sustituir el valor del marcador de posición X por números, letras o números romanos según sea necesario:

• type=1: establece la enumeración con números arábigos empezando por 1 (por defecto, a menos que se especifique lo contrario)
• type=A: establece la enumeración en mayúsculas empezando por A
• type=a: establece la enumeración en minúsculas empezando por a
• type=i / type=I: establece la enumeración en números romanos en minúsculas (i, ii, iii, iv…) o en mayúsculas (I, II, III, IV…)

Establecer el valor de inicio con el atributo start

Si no deseas que la lista empiece por “1” o “A” puedes definir tu propio valor de inicio de la siguiente manera:

<ol start="X"> 
<li>Primer elemento de la lista</li> 
<li>Segundo elemento de la lista</li> 
<li>...</li> 
</ol>

Aquí se sustituye X por el valor en el que debe comenzar la enumeración. Si quieres empezar a contar en el número 5 en orden ascendente, el código apropiado es el siguiente:

<ol start="5"> 
<li>Primer elemento de la lista</li> 
<li>Segundo elemento de la lista</li> 
<li>...</li> 
</ol>

Invertir enumeración con reversed

Para invertir el sentido de la enumeración de la lista, es decir, en orden descendente en lugar de ascendente, utiliza el código reversed. La sintaxis es la siguiente:

<ol start="1" reversed> 
<li>Primer elemento de la lista</li> 
<li>Segundo elemento de la lista</li> 
<li>...</li> 
</ol>

Dependiendo del tamaño de la lista, la enumeración comienza por el valor más alto y cuenta hacia atrás hasta 1.