HTML Listas desordenadas
La etiqueta HTML <ul> define una lista desordenada (con viñetas).
Listo HTML desordenado
Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista estarán marcados con viñetas (pequeños círculos negros) de forma predeterminada:
Listo HTML desordenado: elija el marcador de elemento de lista
La propiedad CSS list-style-type se utiliza para definir el estilo del marcador de elementos de la lista. Puede tener uno de los siguientes valores:
| Valor | Descripción |
|---|---|
| disc | Establecer el marcador de elementos de la lista en una viñeta (predeterminado) |
| circle | Establecer el marcador de elementos de la lista en un círculo |
| square | Establecer el marcador de elementos de la lista en un cuadrado |
| none | Los elementos de la lista no se marcarán |
Ejemplo - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Inténtalo tú mismo »
Ejemplo - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Inténtalo tú mismo »
Ejemplo — Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Inténtalo tú mismo »
Ejemplo — None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Inténtalo tú mismo »
Listas HTML anidadas
Las listas se pueden anidar (lista dentro de la lista):
Ejemplo
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Inténtalo tú mismo »
Nota: Un elemento de 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:
Ejemplo
<!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: #111;
}
</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>
Inténtalo tú mismo »
Consejo: Puedes aprender mucho más sobre CSS en nuestro Tutorial de CSS.
Resumen del capítulo
- Utilice el elemento HTML
<ul>para definir una lista desordenada - Utilice la propiedad CSS
list-style-typepara definir el marcador del elemento de la lista - Utilice el elemento HTML
<li>para definir un elemento de lista - Las listas se pueden anidar
- Los elementos de la lista pueden contener otros elementos HTML
- Utilice la propiedad CSS
float:leftpara mostrar una lista horizontalmente
Etiquetas de lista HTML
| Etiqueta | Descripción |
|---|---|
| <ul> | Define una lista desordenada |
| <ol> | Definir una lista ordenada |
| <li> | Define un elemento de lista |
| <dl> | Define una lista de descripciones |
| <dt> | Define un término en una lista de descripciones |
| <dd> | Describe el término en una lista de descripciones |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
