Las listas nos permiten agrupar los elementos de un documento para facilitar su lectura, aunque con frecuencia se suelen utilizar crear un menú de navegación.
Básicamente las listas en HTML se clasifican en listas desordenadas y listas ordenadas.
Listas desordenadas
Las listas desordenadas reciben este nombre debido a que aunque están formadas por elementos relacionados entre sí, estos se muestran sin ningún orden determinado.
Una lista desordenada se usa cuando se enumeran elementos en los que el orden no tiene relevancia, por ejemplo, supongamos un sitio web de un comercio de ventas de frutas en donde se presentan los diferentes tipos de frutas que ofrecen pero sin tomar en cuenta ningún orden porque simplemente no es importante.
Para crear una lista desordenada debemos emplear el elemento <ul> y dentro de este debemos definir cada item de la lista empleando los elementos <li>.
Vamos a ver un ejemplo con un listado de las diferentes ctategoría de platos o tipos de comida que encontraríamos en un restaurant.
<ul>
<li>Carnes</li>
<li>Pescados y mariscos</li>
<li>Ensaladas</li>
<li>Postres</li>
</ul> Este sería el resultado en el navegador:
- Carnes
- Pescados y mariscos
- Ensaladas
- Postres
Como puedes ver el navegador por defecto asigna una pequeña viñeta con forma de círculo de color negro al lado de cada elemento. Podemos cambiar el aspecto de esta viñeta e incluso eliminarla mediate CSS.
Listas ordenadas
Estas se diferencian de las anteriores porque los elementos que contiene se muestran siguiendo un orden o secuencia lógica. Esto quiere decir que el orden de los elementos si es relevante.
La sintaxis es parecida a la anterior, salvo que en este caso debemos emplear los elementos. Un ejemplo de listas ordenadas serían las intrucciones para preparar una receta:
<ol>
<li>Precalentar el horno a 180 grados.</li>
<li>Agregar azúcar en una sartén a fuego lento.</li>
<li>Verter dentro de un molde.</li>
<li>Licuar leche condensada, huevos y vainilla.</li>
</ol>Este sería el resultado en el navegador:
- Precalentar el horno a 180 grados.
- Agregar azúcar en una sartén a fuego lento.
- Verter dentro de un molde.
- Licuar leche condensada, huevos y vainilla.
En este caso el navegador muestra cada elemento de la lista junto con una secuencia de números en lugar de viñetas.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
