Una lista desordenada HTML te permite enumerar el contenido de tus páginas web de forma clara y sin numeración. Además de la etiqueta básica <ul> en HTML, otros elementos relevantes son la etiqueta de lista <li> y el atributo type.

¿Qué son las listas desordenadas HTML y para qué se utilizan?

Las listas desordenadas en HTML son elementos HTML que se utilizan para la creación de listas en las que el orden de los elementos individuales de la lista es irrelevante. Estas listas pueden integrarse utilizando la etiqueta HTML <ul>, en la que <ul> marca el punto de inicio y </ul> el final de la lista. Los distintos elementos de una lista desordenada se marcan con la etiqueta de listas en HTML <li>, que no limita el número de elementos.

Las listas HTML-<ul> son adecuadas para la presentación estructurada de una amplia variedad de contenidos, como los siguientes:

  • Listas de tareas clásicas: listas de verificación, de ingredientes o de tareas pendientes
  • Funciones: enumeración de las características de un producto o de sus prestaciones
  • Enlaces: listado de enlaces a sitios externos o perfiles en redes sociales
  • Etiquetas: lista de palabras clave populares
  • Listas de precios: presentación en forma de lista de los precios de los servicios o productos
  • Citas: presentación estructurada de las próximas citas
Consejo

La contrapartida de las listas desordenadas HTML son las listas ordenadas HTML que se caracterizan por el hecho de que los elementos individuales de la lista están enumerados y, por tanto, están sujetos a una jerarquía clara.

¿Cómo se crea una lista desordenada HTML con <ul>?

Si deseas incluir una lista desordenada en HTML, puedes hacerlo en cualquier parte del área <body> de tus páginas web. Como ya se ha mencionado, una etiqueta introductoria (<ul>) y una de cierre (</ul>) sirven como marcadores para el inicio y el final de la lista, mientras que los elementos individuales de la lista se definen con la etiqueta introductoria <li> y la de cierre </li>. Por tanto, la sintaxis básica de la etiqueta <ul> en HTML es la siguiente:

<body>
<ul>
<li>Elemento de la lista 1</li>
<li>Elemento de la lista 2</li>
<li>Elemento de la lista 3</li>
<li>…</li>
</ul>
</body>
html

Como en este caso no se ha especificado el símbolo de lista, HTML utiliza el símbolo estándar de “Bullet”, es decir, el clásico punto centrado.

Web Hosting
El hosting que crece con tu proyecto
  • Tiempo de actividad de 99.99 % y seguridad garantizada
  • Aumenta el rendimiento según el tráfico de tu página web
  • Incluye dominio, SSL, e-mail y soporte 24/7

Listas desordenadas en HTML anidadas

Aunque lo normal es utilizar listas ordenadas en HTML para implementar listas jerárquicas, también es posible subordinar elementos de una lista utilizando la etiqueta <ul> en HTML. Para crear este tipo de listas anidadas, simplemente incluye más listas desordenadas HTML dentro de la etiqueta <ul>existente, como en el siguiente ejemplo donde encontramos dos listas subordinadas:

<body>
<p><strong>Lista desordenada anidada:</strong></p>
<ul>
    <li>Frutas
        <ul>
            <li>Manzanas
                <ul>
                    <li>Granny Smith</li>
                    <li>Gala</li>
                    <li>Fuji</li>
                </ul>
            </li>
            <li>Naranjas
                <ul>
                    <li>Navel</li>
                    <li>Naranja sanguina</li>
                    <li>Mandarina</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
html

La categoría principal “Frutas” se subdivide así en las subcategorías “Manzanas” y “Naranjas”, en las que se enumeran distintas variedades. Para el usuario en el navegador, el ejemplo anterior tendría un aspecto similar al siguiente:

Imagen: Ejemplo de lista desordenada HTML anidada
En el ejemplo se utilizan tres elementos `
    ` diferentes.

Personalizar los símbolos de lista <ul> con list-style-type: ejemplos

Mediante la propiedad CSS list-style-type, que puede aplicarse a través del atributo HTML style o una hoja de estilo externa, se pueden personalizar los símbolos de las listas desordenadas en HTML en cualquier momento. De esta forma, se pueden definir, por ejemplo, los siguientes símbolos:

Símbolo list-style-type Descripción
disc Círculo con relleno; selección estándar HTML sin atributostyle
circle Círculo sin relleno
square Cuadrado
none Sin símbolo de lista

En código, esta personalización del diseño tiene, en el caso de que se desee utilizar círculos sin relleno, el siguiente aspecto:

<body>
<p><strong>Manzanas:</strong></p>
<ul style="list-style-type:circle;">
    <li>Granny Smith</li>
    <li>Gala</li>
    <li>Fuji</li>
</ul>
</body
html
Nota

Para un diseño más completo y reutilizable, es aconsejable definir el CSS por separado en un archivo o en la etiqueta <style> del área <head>. Esto garantiza una distinción clara entre contenido y estilo y facilita el mantenimiento del código.

¿Le ha resultado útil este artículo?
Ir al menú principal