Crear listas ordenadas HTML con la etiqueta ol-

Las listas ordenadas HTML, también conocidas como listas numeradas HTML y opuestas a las listas des­or­de­na­das, es­tru­c­tu­ran el contenido je­rá­r­qui­ca y al­fa­nu­mé­ri­ca­me­n­te. 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 do­cu­me­n­tos 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 in­di­vi­dua­les de HTML <ol> se etiquetan con números as­ce­n­de­n­tes, pero también existen otras opciones de enu­me­ra­ción, como pueden ser letras o números romanos.

Las listas numeradas HTML se ca­ra­c­te­ri­zan por presentar un orden de enu­me­ra­ción fijo, si­g­ni­fi­ca­ti­vo y je­rá­r­qui­co. Los puntos no pueden ni deben seguirse unos a otros de manera ar­bi­tra­ria, sino que, a partir de la lógica de su orden, tra­n­s­mi­ten un si­g­ni­fi­ca­do semántico.

¿Por qué son im­po­r­ta­n­tes las listas ordenadas HTML para el SEO?

La es­tru­c­tu­ra clara de los do­cu­me­n­tos HTML desempeña un papel im­po­r­ta­n­te en la op­ti­mi­za­ción para motores de búsqueda y en la ac­ce­si­bi­li­dad de la página web. Un texto si­g­ni­fi­ca­ti­vo, lógico y variado es tan im­po­r­ta­n­te para la eva­lua­ción y captación de co­n­te­ni­dos como la calidad del contenido, las palabras clave y las me­tae­ti­que­tas HTML correctas. Las listas ordenadas HTML son uno de los elementos de diseño más im­po­r­ta­n­tes de los que dispone HTML, junto con los en­ca­be­za­dos, los su­b­tí­tu­los 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/tu­to­ria­les
• Listas cla­si­fi­ca­das/listas de “lo mejor de”
• Procesos o se­cue­n­cias de pasos o tareas
• Enu­me­ra­cio­nes je­rá­r­qui­cas (por ejemplo, de in­gre­die­n­tes de recetas)

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

Para dar a tus textos una es­tru­c­tu­ra clara con elementos de lista ordenados, necesitas las si­guie­n­tes 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 es­pe­ci­fi­que lo contrario en el documento HTML, los na­ve­ga­do­res eti­que­ta­rán por defecto la lista con números arábigos en orden as­ce­n­de­n­te.

¿Cómo se puede cambiar la enu­me­ra­ción de <ol> en HTML?

Si deseas definir el tipo de enu­me­ra­ción o el valor de inicio, vas a necesitar los atributos HTML es­pe­cia­les. Con ellos, puedes definir una enu­me­ra­ción con números y letras, con un valor de inicio o en orden inverso.

Es­ta­ble­cer el tipo de enu­me­ra­ción con type

Para definir el tipo de enu­me­ra­ció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 enu­me­ra­ción con números arábigos empezando por 1 (por defecto, a menos que se es­pe­ci­fi­que lo contrario)
• type=A: establece la enu­me­ra­ción en ma­yú­s­cu­las empezando por A
• type=a: establece la enu­me­ra­ción en mi­nú­s­cu­las empezando por a
• type=i / type=I: establece la enu­me­ra­ción en números romanos en mi­nú­s­cu­las (i, ii, iii, iv…) o en ma­yú­s­cu­las (I, II, III, IV…)

Es­ta­ble­cer 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 enu­me­ra­ción. Si quieres empezar a contar en el número 5 en orden as­ce­n­de­n­te, 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 enu­me­ra­ción con reversed

Para invertir el sentido de la enu­me­ra­ción de la lista, es decir, en orden de­s­ce­n­de­n­te en lugar de as­ce­n­de­n­te, 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>

De­pe­n­die­n­do del tamaño de la lista, la enu­me­ra­ción comienza por el valor más alto y cuenta hacia atrás hasta 1.