27A - 📋 Listas Desordenadas en HTML: Cómo Usarlas

---

Temas tratados en esta entrada

• Listas desordenadas HTML
• Marcadores de la lista
• Listas anidadas
• Lista horizontal o navbar
• Resumen de la entrada

---

Listas desordenadas HTML

Las listas desordenadas en HTML se utilizan para agrupar elementos que no tienen un orden específico. Se representan mediante la etiqueta <ul> (unordered list), que contiene uno o más elementos de lista <li>. Estas listas son ideales para presentar información que no necesita un orden jerárquico, como características de productos, elementos de menú o elementos de una tarea.

Ejemplo

• Elemento 1
• Elemento 2
• Elemento 3

Código del ejemplo

                <ul>
                <li>Elemento 1</li>
                <li>Elemento 2</li>
                <li>Elemento 3</li>
            </ul>
            

---

Marcadores de la lista

Los marcadores de la lista en HTML son los símbolos que se utilizan para representar cada elemento de una lista desordenada. Por defecto, el navegador muestra un círculo negro como marcador. Sin embargo, es posible personalizar estos marcadores utilizando CSS para cambiar su apariencia, por ejemplo, a cuadrados, imágenes o caracteres personalizados. Esta personalización puede mejorar la presentación visual de las listas en una página web.

Ejemplo

• Elemento con marcador circular
• Elemento con marcador circular

• Elemento con marcador cuadrado
• Elemento con marcador cuadrado

• Elemento con marcador de disco (por defecto)
• Elemento con marcador de disco (por defecto)

Código del ejemplo

                <ul style="list-style-type: circle;">
                <li>Elemento con marcador circular</li>
                <li>Elemento con marcador circular</li>
            </ul>
            <ul style="list-style-type: square;">
                <li>Elemento con marcador cuadrado</li>
                <li>Elemento con marcador cuadrado</li>
            </ul>
            <ul style="list-style-type: disc;">
                <li>Elemento con marcador de disco (por defecto)</li>
                <li>Elemento con marcador de disco (por defecto)</li>
            </ul>
            

---

Listas anidadas

Las listas anidadas son listas que contienen otras listas dentro de sus elementos. Esto es útil para organizar información jerárquicamente. Para crear una lista anidada, simplemente colocas una lista desordenada o ordenada dentro de un elemento <li> de otra lista. Esta técnica ayuda a estructurar datos de manera más clara, como en el caso de menús de navegación o subcategorías en un listado.

Ejemplo

• Elemento 1
  • Subelemento 1.1
  • Subelemento 1.2
• Elemento 2
  • Subelemento 2.1
  • Subelemento 2.2

Código del ejemplo

                <ul>
                <li>Elemento 1
                    <ul>
                        <li>Subelemento 1.1</li>
                        <li>Subelemento 1.2</li>
                    </ul>
                </li>
                <li>Elemento 2
                    <ul>
                        <li>Subelemento 2.1</li>
                        <li>Subelemento 2.2</li>
                    </ul>
                </li>
            </ul>
            

---

Lista horizontal o navbar

Una lista horizontal, comúnmente utilizada para menús de navegación (navbar), se puede lograr aplicando estilos CSS a una lista desordenada. Para esto, se utiliza la propiedad display: inline; o display: inline-block; en los elementos <li>. Esto permite que los elementos se muestren uno al lado del otro en lugar de apilarse verticalmente. Las listas horizontales son ideales para organizar enlaces a diferentes secciones de una página de manera clara y accesible.

Ejemplo

• Inicio
• Sobre nosotros
• Servicios
• Contacto

Código del ejemplo

                <ul
                style="list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: flex-start;">
                <li
                    style="border: 1px solid #007bff; border-radius: 4px; margin-right: 10px; padding: 10px; color: white;">
                    Inicio</li>
                <li
                    style="border: 1px solid #007bff; border-radius: 4px; margin-right: 10px; padding: 10px; color: white;">
                    Sobre nosotros</li>
                <li
                    style="border: 1px solid #007bff; border-radius: 4px; margin-right: 10px; padding: 10px; color: white;">
                    Servicios</li>
                <li style="border: 1px solid #007bff; border-radius: 4px; padding: 10px; color: white;">
                    Contacto</li>
            </ul>
            

---

Resumen de la entrada

En esta entrada se han explorado diferentes aspectos de las listas en HTML, incluyendo las listas desordenadas, los marcadores, las listas anidadas y cómo crear listas horizontales para navegación. Estos conceptos son fundamentales para estructurar contenido de manera efectiva en una página web y mejorar la experiencia del usuario. Al aplicar estos principios, puedes organizar la información de manera más lógica y estética.

Ir al índice