Una lista desordenada comienza con 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: elegir marcador de elemento de lista
La propiedad CSS list-style-type 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 de elementos de la lista en una viñeta (predeterminado) |
| circle | Establece el marcador de elementos de la lista en un círculo |
| square | Establece el marcador de elementos de la lista en un cuadrado |
| none | Los elementos de la lista no se marcarán |
Ejm
<ul style="list-style-type:disc;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Listas anidadas
Las listas pueden estar anidadas (una lista dentro de otra)
Ejm
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
Listas horizontales 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>
<head>
<style>
ul {
list-style-type: 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>