¿Qué es una lista o lista enumerada en HTML? - Conceptos básicos de código HTML

La gran mayoría del contenido que consumimos en internet, esta compuesto por etiquetas HTML, incluyendo los párrafos, encabezados y de lo que hablaremos hoy: las listas.

Las listas son uno de los elementos más utilizados a la hora de la creación de un sistema web. Es por ello que en este artículo investigaremos no solo qué son, sino que aprenderemos a cómo crear varios tipos de estas y saber para que ocasión usar cada una.

Definición de lista o lista enumerada en HTML

En este lenguaje de programación las etiquetas llamadas listas le otorgan un orden a nuestro contenido, permitiéndonos generar filas de distintos tipos y marcarlas, ya sea con números o viñetas.

Las listas brindan la posibilidad de presentar información de una manera eficiente y comprensible. Y no solo con el fin de ordenarla, sino también enumerarla. Por esta razón, muchos técnicos de programación, recurren a esta opción para sus archivos HTML.

¿Cuáles son los tipos de listas que se pueden hacer en HTML?

Aunque no lo veamos siempre, en las listas habrá una etiqueta HTML que indicará de que clase es. Existen tales como las no ordenadas, las enumeradas, y por último, de definición.

Listas no ordenadas

Son aquellas que no dependen de una secuencia en específico. Así pues, para que esta función cumpla su objetivo, se necesitan de dos etiquetas HTML. La primera de las etiquetas se llama ul (unordered list) será la que abra y cierre la misma. Y donde la etiqueta li (list item) hará la función de que cada componente aparezca en una fila distinta.

El navegador por defecto interpreta los elementos de las listas con una viñeta. Sin embargo, si queremos cambiar el símbolo, lo podremos realizar con el atributo type o añadiendo un SVG, de manera que decore cada uno de los elementos.

Por otra parte, tal como ocurre con el tipo de letra, se recomienda usar las hojas de estilo CSS para modificar el aspecto de las viñetas. El cual se logra, usando editores tales como Visual Studio Code.

Listas ordenadas

Son similares a las anteriores pero exceptuando que los componentes en conjunto se guían en una categoría determinada. Por lo tanto, son utilizadas a la hora de crear índices o tablas de contenidos que sirven para guiar a los usuarios, ya sea en cualquier página web o en libros.

De la misma forma que las listas no ordenadas, estas se guardan dentro de un elemento HTML. Pero en este aspecto, el tag, se llama ol (ordered list), y de igual forma trabaja de la mano con la etiqueta (list item), donde esta a su vez, añadirá el contenido a la lista, ya sea enumerándolos o de forma alfabética.

Al igual que las desordenadas se pueden modificar los ajustes por defecto con el atributo type, desde iniciar con cualquier número que queramos hasta poner números romanos.

Listas de definición

Acerca de este tipo, son las que menos se emplean en la mayoría de las páginas web. Su objetivo es muy similar al de un diccionario, sus elementos están formados con palabras y sus debidas descripciones.

La etiqueta dl (definition list) redondea la lista de definición, las etiquetas dt (definition term) y dd (definition definition) son las que indican el término y la descripción de cada elemento de la lista.

¿Cómo se hace una lista en código HTML?

Para lograr realizar una lista en la versión vigente de este lenguaje (HTML5), emplearemos los recursos ya mencionados. Las etiquetas iniciales son el cimiento de una lista, debido a que son las que envuelven a los elementos. Para finalizar, el tag li, es la etiqueta en común entre los diferentes tipos de listas, su labor es darles un espacio a los elementos, desde una manera ordenada o desorganizada.

Estructura de una lista en lenguaje de HTML

Como habíamos mencionado antes, los tipos de listas tienen un tag inicial distinto. Así como en las desorganizadas, la etiqueta que se emplea es ul, donde a su vez, deberá tener un símbolo denominado bullet al inicio. En el caso de las ordenadas se utiliza ol y al contrario de las anteriores, se enumerará partiendo del número uno a cada elemento.

Iniciando con cualquier de los tags principales (dependiendo del uso que se le quiere dar), dentro de estos, se empleará siempre el tag li (y su respectivo cierre), en el cual, será la cabida para el contenido escrito y posterior a esto, se terminará de cerrar las listas con ol o ul según sea la ocasión.

Ejemplos de listas enumeradas y no enumeradas en código HTML

A continuación, veremos un par de ejemplos de códigos de los distintos tipos de listas para poder aclarar este sistema:

• Listas enumeradas:

< h1 > los primeros 3 elementos químicos < /h1 >  
< ul > 
  < li > Hidrógeno < /li >    
  < li > Litio < /li >    
  < li > Sodio < /li >  
< /ul >

El efecto producido se vería tal como:

Los primeros elementos químicos

1. Hidrógeno
2. Litio
3. Sodio.

• Listas no enumeradas:

< h1 > Las entidades HTML más usadas < /h1 >
< ul >
< li > &.gt; (más que)  < /li >
< li > &.lt; (menos que) < /li >
< li > € (euro)  < /li >
< /ul >  

El resultado de la no enumeradas seria:

Las entidades HTML más usadas

• & .gt; (más que)
• & .lt; (menos que)
• € (euro).