Listas numeradas y listas desordenadas en HTML5

Aunque existen cinco tipos diferentes de listas, solo vamos a ver las dos con las que normalmente vamos a trabajar. El objetivo de este curso es aprender lo necesario, para desarrollar un sitio web completo. Así que hoy aprenderemos como definir y usar listas numeradas y listas desordenadas en HTML5. Si eres principiante, no te agobies porque lo vas a pillar a la primera, ya veras.

Listas numeradas u ordenadas

Se engloban por las etiquetas <ol>.....</ol>, que es la etiqueta padre. Cada elemento de la lista estará encabezado por la etiqueta <li> que lleva la etiqueta de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.

Prueba tu a escribir de manera abreviada el ejemplo que viene a continuación. Para ello lo escribimos de la siguiente manera: ol>li{Elemento}*5 + tecla tab y se generan los 5 elemento de manera automática. Debemos acostumbrarnos a ahorrar tiempo y eso lo conseguimos con Sublime Text y el plugin Emmet.

<ol> soporta atributos

La etiqueta <ol> también soporta atributos que permiten cambiar el comportamiento e inclusive, la apariencia de algunas etiquetas html. En este caso la etiqueta <ol> soporta el atributo type="".
En type="" podemos definir el tipo de numeración que queremos definir. Si colocamos dentro de las comillas el numero "1", estará listada de manera numérica. Si pusiéramos "A" seria alfabética. Si pusiéramos "i" serian números romanos en minúscula e "I" mayúscula para números romanos en mayúscula.

Otro atributo de los que soporta la etiqueta <ol> es start="". Con este atributo podemos decidir por donde va a comenzar la lista, es decir que si la lista tiene 5 elementos y a start="" le damos el valor de 2, esta lista empezará por el numero 2.

Listas con viñetas o desordenadas

Se engloban por las etiquetas <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas o marcadores delante de cada elemento de lista. Las utilizaremos, siempre que no importe el orden de los elementos de la lista.
Prueba tu a escribir de manera abreviada el ejemplo que viene a continuación. Para ello lo escribimos de la siguiente manera: ul>li{Elemento}*5 + tecla tab y se generan los 5 elemento de manera automática en tu Sublime Text.

Otra cosa bastante interesante, es que podemos crear sub-listas. La verdad es que es bastante fácil y seguro que lo coges a la primera. Veamos el ejemplo a continuación.

Conclusiones

Nada más que debamos saber por el momento en cuestión de listas numeradas y listas desordenadas en HTML5. De todas maneras, si te pica la curiosidad y quieres completar esta información, hay muchos sitios donde existe información muy completa sobre este tema.

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©2018