<ul>

<ul> (unordered list, lista no ordenada) es el elemento HTML que agrupa un conjunto de ítems relacionados donde cambiar el orden no cambia el significado. Eso es exactamente lo que declara la “u” del nombre: el orden no cuenta. Los ejemplos canónicos son una lista de compras, los ingredientes de una receta, las características de un producto, las páginas de un menú de navegación. Si reordenás los ítems y el contenido sigue siendo igualmente válido, estás ante una <ul>.

El elemento cumple una función semántica clara: le comunica al navegador, al lector de pantalla y a cualquier herramienta que procese el documento que esos ítems forman un conjunto, no una secuencia con orden obligatorio. Un lector de pantalla anuncia “lista de N ítems” al entrar y “fin de lista” al salir — esa información viene del <ul>, no del estilo visual. Si en cambio simulás una lista con párrafos y guiones, el documento pierde esa estructura y los lectores de pantalla procesan cada línea como un párrafo suelto.

La presentación visual (la viñeta •) es solo el estilo por defecto del agente de usuario y se puede cambiar completamente con CSS. El punto real de <ul> no es la viñeta: es la declaración de que esos ítems son un grupo sin orden impuesto.

Cómo funciona

<ul> es un elemento de bloque: ocupa el ancho disponible y crea salto de línea antes y después. Contiene uno o más <li> (list item) como hijos directos; el navegador numera — en este caso, viñetea — cada uno automáticamente. El estilo de viñeta por defecto es un disco sólido (•), pero la propiedad CSS list-style permite cambiarlo a círculo, cuadrado, ninguno, o incluso una imagen propia.

El uso más común fuera de las listas de contenido es el menú de navegación: <nav><ul><li><a href="...">...</a></li></ul></nav>. Los lectores de pantalla y motores de búsqueda entienden la estructura; CSS convierte la lista vertical en una barra horizontal.

Modelo de contenido

El único hijo directo válido de <ul> es <li>. No se puede poner texto suelto, <p>, <div> ni ningún otro elemento directamente adentro del <ul>. El contenido complejo (párrafos, imágenes, listas anidadas) va dentro de cada <li>, no en la <ul>.

<ul> puede ir dentro de cualquier elemento que acepte contenido de flujo: <div>, <article>, <section>, <nav>, <td>, etc. Display por defecto: block.

Sintaxis

<!-- Lista de compras básica -->
<ul>
  <li>Pan</li>
  <li>Leche</li>
  <li>Huevos</li>
</ul>

<!-- Menú de navegación: ul dentro de nav -->
<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

<!-- Lista anidada: la lista hija va dentro de un li -->
<ul>
  <li>Frutas
    <ul>
      <li>Manzana</li>
      <li>Pera</li>
    </ul>
  </li>
  <li>Verduras</li>
</ul>

Atributos

<ul> no tiene atributos propios vigentes. El atributo type (para cambiar el marcador: disc, circle, square) fue legacy desde HTML4 — hoy se hace con CSS (list-style-type). Acepta los atributos globales (class, id, lang, data-*).

Accesibilidad

El rol implícito de <ul> es list. Los lectores de pantalla anuncian “lista de N ítems” al entrar y “fin de lista” al salir. Algunos navegadores y lectores de pantalla (especialmente Safari + VoiceOver) eliminan el rol list cuando se aplica list-style: none por CSS — esto puede romper el anuncio de lista para usuarios de tecnología asistiva. Si necesitás quitar las viñetas con CSS y que la lista siga siendo anunciada como lista, agregá role="list" explícitamente en el <ul>.

Cuándo usar <ul> vs. alternativas

Notas, gotchas e interacción

• Texto suelto o <p> como hijo directo de <ul> es inválido. El validador HTML lo reporta como error. Todo va dentro de <li>.
• Las listas anidadas van dentro del <li>, no fuera. Un <ul> hijo de <ul> directo (sin el <li> intermedio) es HTML inválido.
• list-style: none y el rol de accesibilidad. Ver sección Accesibilidad arriba — es el gotcha más silencioso de <ul>.
• Menús de nav con <ul>. El patrón <nav><ul><li><a> es el estándar; los lectores de pantalla esperan ese patrón para los landmarks de navegación.

Vigente / legacy

<ul> está completamente vigente. Los atributos type y compact son legacy: type se movió a CSS (list-style-type) en HTML4; compact nunca tuvo efecto real en navegadores modernos y está obsoleto desde HTML5.