Etiqueta ul en HTML: listas sin orden significativo

La etiqueta <ul> en HTML representa una lista cuyos elementos no tienen un orden significativo. Sirve para agrupar requisitos, materiales o características cuando cambiar su posición no cambia el sentido del conjunto. Usa un <li> para cada entrada; el navegador suele presentar estas listas con viñetas.

<ul>
  <li>Editor de texto</li>
  <li>Navegador</li>
</ul>

El resultado es una lista de dos requisitos, Editor de texto y Navegador, sin prioridad ni secuencia obligatoria. Intercambiarlos no cambia qué necesitas. Para probar el fragmento, colócalo en el <body> de un documento HTML; puedes utilizar el documento completo del ejemplo práctico y sustituir su lista por esta.

Sintaxis y contexto válido

Escribe la apertura <ul>, sus entradas y el cierre </ul>: ninguna de las dos etiquetas puede omitirse. Los ejemplos cierran también cada <li> para mostrar sus límites, aunque HTML permite omitir ese cierre en determinadas condiciones.

Puedes colocar <ul> donde se admite contenido de flujo, por ejemplo dentro de <body>, <section>, <div> o un <li>. No va dentro de un párrafo <p>. Sus hijos directos pueden ser cero o más elementos <li> y elementos de soporte de scripts, <script> o <template>. Estos últimos no cuentan como entradas. El texto de cada entrada pertenece a su <li>.

Un párrafo introductorio va antes de la lista; un párrafo que desarrolla una entrada puede ir dentro de su <li>. No pongas <p> ni otra lista como hijos directos de <ul>. El HTML Living Standard define este contexto y contenido permitido.

Lista no ordenada frente a ol

Piensa en la diferencia entre «materiales necesarios» y «pasos para construir». Los materiales pueden cambiar de posición sin alterar el conjunto: usa <ul>. En los pasos, pegar antes de cortar puede cambiar el resultado: usa <ol>.

La elección depende del significado. Una lista alfabética de materiales puede seguir siendo <ul>: el orden ayuda a localizar nombres, pero no establece pasos ni puestos. Las viñetas y los números son presentación; CSS puede cambiar los marcadores sin transformar un elemento en otro.

En el ejemplo mínimo, sustituir <ul> y </ul> por <ol> y </ol> produce habitualmente números y expresa orden. Retirar solo el contenedor deja los <li> sin un padre válido. Que el navegador conserve el texto o incluso dibuje marcadores no corrige ese error.

Ejemplo práctico: materiales con herramientas anidadas

Guarda este código como materiales.html con codificación UTF-8 y ábrelo en el navegador. Incluye todo el CSS necesario y funciona sin JavaScript, servidor ni otros archivos.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Materiales para una maqueta</title>
    <style>
      body {
        font-family: sans-serif;
        line-height: 1.5;
        margin: 1rem;
      }

      .materiales {
        list-style: square outside;
        padding-inline-start: 1.5rem;
      }

      .materiales ul {
        list-style: circle outside;
        padding-inline-start: 1.5rem;
      }
    </style>
  </head>
  <body>
    <h1>Materiales para una maqueta</h1>
    <p>Reúne estos materiales; no hay que comprarlos en este orden.</p>
    <ul class="materiales">
      <li>Cartulina</li>
      <li>
        Herramientas
        <ul>
          <li>Tijeras</li>
          <li>Regla</li>
        </ul>
      </li>
      <li>Cinta adhesiva</li>
    </ul>
  </body>
</html>

1. Comprueba las tres entradas principales: Cartulina, Herramientas y Cinta adhesiva, con marcadores cuadrados. Dentro de Herramientas aparecen Tijeras y Regla, con círculos huecos y una sangría adicional.
2. Observa dónde se cierra el <li> de Herramientas: después de la sublista. Así, los dos instrumentos pertenecen a esa entrada. Una sublista como hermana directa de los <li> sería incorrecta.
3. Cambia square por disc en .materiales: verás puntos sólidos en el nivel exterior. La sublista conserva circle porque tiene su propia regla. El texto y las relaciones entre entradas permanecen iguales.
4. Retira el bloque <style>: vuelve la presentación del navegador, pero continúan las dos listas y la pertenencia de las herramientas. Reduce la ventana y prueba también con JavaScript desactivado: no cambia el contenido.

El orden de lectura sigue el documento: Cartulina, Herramientas, Tijeras, Regla y Cinta adhesiva. «Sin orden significativo» no significa lectura aleatoria. Puedes reorganizar los materiales sin cambiar qué necesitas; conserva cada sublista junto a su categoría. Consulta la guía de <li> para ampliar las reglas de cada entrada.

Atributos y propiedades CSS

<ul> no tiene atributos específicos vigentes. En el ejemplo, class="materiales" es un atributo global que permite seleccionar la lista desde CSS. lang="es", también global, está en <html> y establece el idioma heredado del documento; no crea ni traduce la lista.

Los antiguos atributos type y compact de <ul> están obsoletos: utiliza CSS para su presentación. start y reversed pertenecen a <ol>, no a <ul>.

list-style es una propiedad CSS abreviada para el tipo, la posición y la imagen del marcador. En square outside, square elige la forma y outside coloca el marcador fuera del bloque de texto. Si solo quieres cambiar la forma, puedes usar list-style-type: square. No son atributos HTML ni instrucciones de JavaScript. La documentación de list-style explica también por qué las listas anidadas pueden tener estilos propios.

Accesibilidad al cambiar las viñetas

La estructura nativa permite reconocer una lista y sus entradas. <ul> tiene el rol implícito list y <li>, en este contexto, listitem. Las categorías se comunican mediante texto y anidación, además de sangría o forma del marcador. El anuncio exacto de niveles y cantidades depende del navegador y del lector de pantalla.

¿Ul siempre tiene viñetas? Es su apariencia habitual, pero list-style: none puede ocultarlas. El HTML sigue representando una lista; su exposición a las tecnologías de asistencia merece una comprobación aparte. ARIA en HTML advierte que algunos navegadores suprimen el rol implícito al quitar los marcadores. En ese caso concreto, role="list" puede recuperar su exposición; no hace falta añadirlo a las listas del ejemplo, que conservan marcadores.

En la comprobación local del 4 de octubre de 2026, Chromium 153 conservó los roles de ambas listas y sus cinco entradas al aplicar list-style: none a los dos niveles. Esto no garantiza el mismo resultado en otros navegadores ni un anuncio idéntico con lectores de pantalla. Si ocultas viñetas en tu proyecto, revisa el árbol accesible y prueba la lectura en las combinaciones que utilices.

Errores frecuentes y etiquetas relacionadas

¿Dónde va una lista anidada? Dentro del <li> al que pertenece, antes de su cierre, como Herramientas en el ejemplo. Añadir margen con CSS a una lista colocada fuera de ese <li> no crea la relación que falta.

No simules listas escribiendo símbolos y separando líneas con <br>: consigues texto con saltos, sin la estructura de lista. Tampoco uses <ul> solo para obtener sangría.

Si no aparecen viñetas, comprueba que las entradas sean <li> dentro de <ul> y revisa su CSS: list-style: none, una regla display sobre los <li> o un contenedor que recorta los marcadores pueden explicar el resultado.

<menu> ofrece una alternativa semántica para una lista de comandos, como botones de editar o copiar. Una lista de materiales corresponde a <ul>; una secuencia de pasos corresponde a <ol>. Ninguna de estas etiquetas crea por sí sola un menú interactivo con teclado.

Compatibilidad y fuentes

Compatibilidad consultada el 4 de octubre de 2026: MDN clasifica <ul> como ampliamente disponible. Los ejemplos usan HTML nativo y las formas básicas de marcadores CSS; no dependen de APIs ni de carga de recursos.

Para significado, sintaxis y restricciones, consulta la sección de <ul> del HTML Living Standard. MDN documenta sus atributos y ejemplos; ARIA en HTML describe su relación con los roles accesibles.