Etiqueta HTML <ul>
La etiqueta HTML <ul> define una lista desordenada que agrupa elementos sin orden específico. Aprende su sintaxis, anidamiento y estilos con CSS.
La etiqueta HTML <ul> se utiliza para definir una lista desordenada, que agrupa una colección de elementos sin un orden numérico. Cuando se cambia el orden de los elementos de la lista, el significado no varía. Por lo general, los elementos de una lista desordenada se muestran con una viñeta. Esta puede tener distintas formas: círculo, punto o cuadrado.
Cada elemento de una lista desordenada se declara dentro de la etiqueta <li>.
La etiqueta <ul> es un elemento de bloque y ocupa todo el espacio horizontal disponible. Su altura depende del contenido dentro del contenedor. Una lista desordenada se representa normalmente como una lista con viñetas.
La etiqueta <ol> también representa una lista de elementos y crea una lista ordenada. Sin embargo, se diferencia de <ul> en que el orden dentro de <ol> es significativo. De forma predeterminada, los elementos de una lista ordenada se muestran con números.
Las etiquetas <ul> y <ol> pueden anidarse con la profundidad que desees. Las listas anidadas pueden alternar entre <ul> y <ol>. Sin embargo, debes tener en cuenta que al anidar una lista dentro de otra, la lista interior debe colocarse dentro de un elemento <li> de la lista exterior. Esto significa que el hijo directo de una lista debe ser un elemento <li>, pero ese elemento <li> puede contener otra lista. Es posible cambiar el marcador de los elementos de la lista con CSS. Sin embargo, el significado semántico expresado por la elección del tipo de lista no puede modificarse con CSS.
Sintaxis
La etiqueta <ul> va en pares. El contenido se escribe entre las etiquetas de apertura (<ul>) y cierre (</ul>).
Ejemplo de la etiqueta HTML <ul>:
Ejemplo de la etiqueta HTML <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Listas anidadas
Las listas se anidan con frecuencia para expresar jerarquía; por ejemplo, un menú con subelementos. Para anidar una lista, coloca el <ul> interior dentro de un <li> de la lista exterior, no directamente dentro del <ul> exterior. El hijo directo de un <ul> siempre debe ser un <li>.
Ejemplo de un <ul> anidado
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>
Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>Los navegadores cambian automáticamente el marcador de viñeta en cada nivel de anidamiento (disco, luego círculo, luego cuadrado), lo que facilita la lectura de la jerarquía.
Estilizar la lista con CSS
Los atributos históricos type y compact están obsoletos en HTML5 — no los utilices. La forma moderna y semántica de cambiar el marcador de viñeta es la propiedad CSS list-style-type (o list-style-image para una imagen personalizada). Mantener el marcador en CSS separa la presentación de la estructura: la lista sigue significando "lista desordenada" sin importar cómo la estilices.
Ejemplo de <ul> estilizado con la propiedad CSS list-style-type:
Ejemplo de la etiqueta HTML <ul> con la propiedad CSS list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.square {
list-style-type: square;
}
ul.circle {
list-style-type: circle;
}
ul.none {
list-style-type: none;
}
</style>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul class="square">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul class="circle">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul class="none">
<li>No marker</li>
<li>No marker</li>
</ul>
</body>
</html>Menús de navegación
El uso más común de <ul> en el mundo real es un menú de navegación. Envolver la lista en un elemento <nav> la marca como un punto de referencia de navegación, y la lista sigue comunicando "estos elementos forman un grupo" a las tecnologías de asistencia. Las viñetas se eliminan habitualmente con CSS.
Ejemplo de un menú de navegación construido con <nav> y <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>
</html>Accesibilidad
Los lectores de pantalla tratan un <ul> como una lista: anuncian que una lista está comenzando, leen el número de elementos que contiene (por ejemplo, "lista, 3 elementos") y leen cada elemento en orden. Este conteo de elementos es contexto útil para los usuarios con discapacidad visual, por lo que es preferible usar el marcado real <ul>/<li> en lugar de un conjunto de elementos <div> estilizados.
Existe una advertencia importante. En Safari con VoiceOver, aplicar list-style: none (como se hace habitualmente en los menús de navegación) elimina la semántica de lista — VoiceOver deja de anunciarla como una lista. Si el rol de lista es relevante en ese contexto, restáuralo explícitamente:
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
</ul>Atributos
La etiqueta <ul> no tiene atributos específicos del elemento en el estándar HTML actual. (Los antiguos atributos type y compact están obsoletos — usa CSS en su lugar.) Solo admite los atributos globales y los atributos de evento.
Etiquetas y temas relacionados
<li>— define cada elemento de la lista.<ol>— crea una lista ordenada (numerada).- Listas HTML — descripción general de todos los tipos de listas en HTML.
- CSS
list-style-type— controla el marcador de viñeta.