Listas HTML desordenadas

La etiqueta <ul> define una lista desordenada.

Listas desordenadas

Una lista desordenada comienza por la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma predeterminada.

Ejm

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Lista HTML desordenada: selecciona el marcador de elemento de lista

La propiedad de tipo de estilo de lista CSS se utiliza para definir el estilo del marcador de elemento de lista. Puede tener uno de los siguientes valores.

Valor	Descripción
disc	Establece el marcador del elemento de lista en una viñeta (predeterminado)
circle	Establece el marcador del elemento de la lista en un círculo.
square	Establece el marcador del elemento de la lista en un cuadrado
none	Los elementos de la lista no se marcarán.

Ejm con disc

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ejm con circle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ejm con square

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ejm con none

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Listas HTML anidadas

Las listas pueden estar anidadas unas sobre otras, veamos un ejm.

Ejm

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Nota: Un elemento de la lista (<li>) puede contener una nueva lista y otros elementos HTML, como imágenes y enlaces, etc.

Lista horizontal con CSS

Las listas HTML se pueden diseñar de muchas maneras diferentes con CSS.

Una forma popular es diseñar una lista horizontalmente, para crear un menú de navegación.

Ejm

<!DOCTYPE html>
<html lang="es">
	<head>
    	<style>
			ul
			{
				list-style-tipe:none;
				margin:0;
				padding:0;
				overflow:hidden;
				background-color:#333333;
			}
			
			li
			{
				float:left;	
			}
			
			li a
			{
				display:block;
				color:white;
				text-align:center;
				padding:16px;
				text-decoration:none;	
			}
			
			li a:hover
			{
				background-color:#111111;	
			}
		</style>
    </head>
    <body>
    	<ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="about">About</a></li>
        </ul>
    </body>
</html>

Resumen

Se usa la etiqueta <ul> para definir una lista desordenada.
Se usa la propiedad list-style-type para definir el marcador del elemento de la lista.
Se usa el elemento HTML <li> para definir un elemento de la lista.
Las listas pueden estar anidadas.
Las listas pueden contener otros elementos HTML.
Usamos la propiedad float:left para mostrar una lista horizontal.

Tabla con las posibles etiquetas

Etiqueta	Descripción
<ul>	Define una lista desordenada
<ol>	Define una lista ordenada
<li>	Define un elemento de la lista
<dl>	Define una lista de descripción
<dt>	Define un término de una lista de descripción
<dd>	Define el término en una lista de descripción