Los atributos son muy útiles para dar estilo o cambiar parámetros de tus listas ordenadas en HTML. Con estos elementos, podrás hacer que los números se conviertan en romanos, que la lista se haga con letras o que empiece en el número que desees. También que las líneas de los elementos de tu lista HTML tengan menos espacio entre ellas o añadirle algunos parámetros como títulos.
¿Quieres saber cómo hacerlo? ¡Despega con nosotros y aprende todo sobre los atributos para listas ordenadas en HTML!
Índice de Contenidos
Atributos específicos para listas ordenadas en HTML
El atributo principal para las listas ordenadas en HTML es ‘type‘. Este atributo nos permite cambiar el contador con el que se ordenan las listas, pero también cambiar el estilo de la lista. Todo ello añadiéndolo a la etiqueta <ol>.
En todo caso, al igual que otras etiquetas, <ol> y <li> también permiten todos los atributos genéricos que nos permiten dar estilo, poner un titulo y cualquier otra acción sobre ellas.
See the Pen Atributos para listas ordenadas en HTML by HTML Masters (@htmlmasters) on CodePen.
Repasamos en esta lista todos los atributos específicos para las listas ordenadas en HTML:
Listas numeradas en HTML
El modo predeterminado en el que se crean las listas ordenadas son con números a partir del 1. En todo caso, si quieres asegurarte de que será así, puedes añadirle el atributo type=»1″ a la etiqueta <ol> de tu lista.
Puedes observar aquí un ejemplo de cómo debería hacerse:
<ol type="1">
<li>Madrid</li>
<li>Barcelona</li>
<li>Valencia</li>
<li>Sevilla</li>
</ol>
Listas ordenadas con letras en HTML
Si, por el contrario, quieres que tu lista se ordene con letras de la A. a la Z., puedes hacerlo con el atributo ‘type’, con dos alternativas diferentes.
- type=»a»: listas ordenadas con letras minúsculas.
- type=»A»: listas ordenadas con letras mayúsculas.
Puedes ver y copiar desde aquí dos ejemplos con cada una de estas listas:
<ol type="a">
<li>Madrid</li>
<li>Barcelona</li>
<li>Valencia</li>
<li>Sevilla</li>
</ol>
Listas HTML con números romanos
Por último, el atributo type también te permite crear tus listas con números romanos. Al igual que pasa en el caso de las letras, puedes hacerlo tanto en números en mayúscula como en minúscula de la siguiente manera:
- type=»i»: listas ordenadas con números romanos en minúscula.
- type=»I»: listas ordenadas con números romanos en mayúscula.
Aquí tienes unos ejemplos:
<ol type="i">
<li>Madrid</li>
<li>Barcelona</li>
<li>Valencia</li>
<li>Sevilla</li>
</ol>
Listas ordenadas con saltos
Sin embargo, no siempre las listas pueden empezar con el 1. Por ello, HTML5 nos permite crear listas ordenadas que comiencen en otro punto. Si necesitas que tu lista comience en un número diferente, debes añadir el atributo start=»[inserta el número que desees]» a la etiqueta <ol> de tu lista.
Puedes ver aquí un ejemplo de cómo hacer una lista que comience con el número 5:
<ol start="5">
<li>Madrid</li>
<li>Barcelona</li>
<li>Valencia</li>
<li>Sevilla</li>
</ol>
Listas en orden inverso
HTML5 también nos da la posibilidad de crear listas en orden inverso fácilmente. el atributo ‘reversed’ se usa para invertir el orden de los números o las letras de cada elemento. Se utiliza colocándolo en el interior de la etiqueta <ol>, como se puede ver en este ejemplo:
<ol reversed">
<li>Madrid</li>
<li>Barcelona</li>
<li>Valencia</li>
<li>Sevilla</li>
</ol>
Listas con estilo compacto
Sin embargo, el estilo del dígito o letra que convierte la lista en ordenada no es lo único que puede modificarse a través de los atributos para listas ordenadas en HTML. También el estilo de la propia lista. En este caso, el atributo ‘compact’ nos permite reducir el espacio entre elementos colocándolo en el interior de la etiqueta <ol> de la siguiente manera.
<ol compact">
<li>Madrid</li>
<li>Barcelona</li>
<li>Valencia</li>
<li>Sevilla</li>
</ol>
Otros atributos genéricos para listas ordenadas HTML
Además, las listas ordenadas en HTML nos permiten usar otros atributos genéricos para identificar nuestra lista ordenada. Estos son algunos de los atributos que podemos utilizar:
- title: señala el título del elemento.
- style: ofrece información sobre el estilo en línea.
- class e id: identificador del elemento.
- dir: dirección del texto.
- lang: información sobre el idioma de uso.
Como puedes ver, las listas ordenadas ofrecen muchas posibilidades de personalización. Si tienes dudas con cualquiera de ellas, puedes preguntarnos en comentarios.
¡Hasta la próxima!
