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 |