Listas desordenadas en HTML

Las listas desordenadas en HTML son aquellas que muestran sus elementos precedidos de un decorador, conocido como viñeta. Las listas desordenadas en HTML se construyen mediante el elemento UL.

Estructura del elemento UL

La estructura de un elemento UL es la siguiente:

<ul></ul>

Cada uno de los elementos que están dentro de las listas desordenadas en HTML se construyen mediante el elemento LI. Así la estructura que tendremos se parecerá a lo siguiente:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  ...
  <li>Elemento N</li>
</ul>

Ejemplo de lista de frutas

En este caso vamos a crear una lista de frutas mediante las listas desordenadas en HTML. El código que tendremos que generar es:

<ul>
  <li>Naranja</li>
  <li>Manzana</li>
  <li>Pera</li>
  <li>Sandía</li>
  <li>Platano</li>
</ul>

Vemos que cada elemento de la lista desordenada empieza y termina con el elemento LI. El resultado de este código hará que se visualice lo siguiente:

• Naranja
• Manzana
• Pera
• Sandía
• Platano

Personalización de viñetas

Si quisiésemos cambiar el tipo de viñeta que se muestra en las listas desordenadas en HTML deberemos de acudir al lenguaje CSS, mediante el cual podremos poner círculos, cuadrados,… incluso imágenes como hitos de las listas desordenadas.