Cómo hacer listas desordenadas en HTML

Las listas desordenadas en HTML son el tipo más básico de listados que se pueden hacer. Su dinámica es muy sencilla, y no te llevará mucho tiempo aprender a hacerlas. Además, suponen la base para poder aprender, posteriormente, a hacer otros tipos de listas. Por tanto, vamos ya a conocer cómo hacer listas desordenadas en HTML.

¡Despegamos!

Listas desordenadas: Definición

Las listas desordenadas o listas no numeradas en HTML sirven para crear listas sin ningún orden. Los conceptos que escribas en la lista aparecerán en el orden en el que los establezcas. Es decir, no será aleatorio.

Sin embargo, a la hora de visualizarse se hará mediante puntos, cuadrados o viñetas, pero en ningún caso con números, letras o números romanos, como sí sucede en las listas ordenadas, o con pequeñas sangrías como en las listas de descripción.

Listas no ordenadas: etiqueta para hacerlas

Para redactar una lista desordenada en HTML, es necesario utilizar la etiqueta <ul> (Unordered List, Lista Desordenada en inglés). Esta etiqueta deberá ir al comienzo de la lista (<ul>) y al final (</ul>), para abrir y cerrar nuestra lista correctamente.

Entre estas dos etiquetas, para cada uno de los conceptos, tendremos que utilizar la etiqueta <li> para cada concepto. En este caso, también debemos cerrar cada uno de ellos con la etiqueta </li>.

Ejemplos de listas desordenadas

Una vez conocemos tan solo estas dos etiquetas, ya estamos preparados para ver algunos ejemplos prácticos. El código que permite construir listas desordenadas en HTML es el siguiente:

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

Esta lista se puede ampliar a todos los conceptos que queramos, ya que no hay ningún límite. Así, podremos hacer listas desde un solo concepto, hasta infinitos.

Atributos para listas desordenadas

Los atributos en HTML son muy útiles para personalizar los elementos. En el caso de las listas desordenadas, son personalizables a través del atributo ‘type’.

Es decir, tan solo utilizando HTML podremos conseguir que el símbolo que señala cada elemento de la lista sea diferente. Este atributo deberemos escribirlo dentro de la etiqueta <ul>, seguido de un ‘=’ y el concepto que queramos añadir entre comillas.

<ul type="descripción del atributo">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Tipos de listas desordenadas en HTML

Según el concepto que añadamos dentro del atributo ‘type’, es decir, entre comillas, conseguiremos diferentes tipos de listas desordenadas:

• Disco (disc).
• Círculo (circle).
• Cuadrado (square).
• Sin marcador (none).

Lista desordenada HTML tipo disco

Es la básica, la que viene predeterminada, cuando realizamos una lista y no le añadimos ningún tipo de atributo. En todo caso, si queremos asegurarnos de que aparezca con un punto negro, será el atributo type=»disc» el que tengamos que utilizar, tal y como aparece en el ejemplo.

<ul type="disc">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

¿Cómo hacer una lista con círculo en HTML?

Para crear una lista con un círculo que no esté relleno, tendremos que añadir el atributo type=»circle» a la etiqueta <ul> de la lista en la que estemos trabajando.

<ul type="circle">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Lista no ordenada con cuadrados

Si, por el contrario, lo que quieres es que tu marcador sea un cuadrado, el atributo type deberá incluir la palabra ‘square‘, tal y como aparece en el ejemplo.

<ul type="square">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Lista HTML sin puntos ni marcadores

Por último, si lo que quieres es que tu lista no tenga ningún tipo de marcador, también podrás hacerlo, exclusivamente, con HTML. Para ello, tendremos que añadir el atributo type=»none» a la etiqueta <ul> de la lista.

<ul type="none">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

Recuerda que todos los códigos puedes utilizarlos a tu gusto. Copia, pega en tu código, modifica los conceptos y consigue todas las listas que necesites para tu documento HTML.