Lista desordenada: los ítems no tienen orden significativo entre sí. El navegador los muestra con viñetas (bullet disc por defecto) y cada ítem debe ser un <li>. Se usa para menús de navegación, listas de características, grupos de opciones sin jerarquía de prioridad. Los lectores de pantalla anuncian el número de ítems al entrar a la lista.

Para menús de navegación, siempre envuelve el <ul> en un <nav>. El CSS list-style: none; padding: 0; elimina las viñetas para layouts de navegación sin perder la semántica de lista.

Lista ordenada (numerada). Atributos clave: type (1, A, a, I, i), start (número inicial), reversed (cuenta hacia atrás). Usa value en un <li> específico para saltar la numeración.

Elemento de lista, válido dentro de <ul>, <ol> y <menu>. Puede contener cualquier tipo de contenido: texto, imágenes, botones, incluso listas anidadas. En una <ol>, el atributo value sobreescribe el número del ítem y hace que la numeración continúe desde ese valor en los ítems siguientes.

Un <li> con list-style: none y sin contexto de lista puede confundir a lectores de pantalla. Si usas listas como layout puro, añade role="list" explícitamente en Safari/VoiceOver.

Lista de definiciones: <dt> es el término y <dd> su descripción. Un <dt> puede tener múltiples <dd>. Ideal para glosarios, metadatos, FAQs y pares clave-valor. Los lectores de pantalla anuncian la relación semántica entre término y definición.

Lista de comandos o acciones de interfaz de usuario. Es semánticamente equivalente a <ul> en la mayoría de navegadores modernos (el soporte como menú contextual fue eliminado), pero expresa intención semántica diferente: se usa cuando los ítems de la lista son acciones que el usuario puede ejecutar (botones, acciones de toolbar) en lugar de ser contenido informativo. Cada ítem debe ser un <li> con botones u otras acciones.

La especificación HTML eliminó los atributos type="context" y type="toolbar" de <menu>. Hoy es básicamente un alias semántico de <ul> para grupos de comandos. Para toolbars accesibles, añade role="toolbar".

Propiedad CSS que cambia el símbolo del marcador de los ítems de lista. Acepta valores predefinidos (disc, circle, square, numerales romanos, letras), strings personalizados ('→ ', '✓ '), emojis e imágenes con list-style-image: url(). La propiedad shorthand list-style combina tipo, posición e imagen. Para control total del marcador en navegadores modernos, usa el pseudoelemento ::marker.

Con CSS moderno puedes usar emojis directamente: list-style-type: '✅ '. El espacio al final del string evita que el emoji quede pegado al texto del ítem.

Pseudoelemento CSS que representa directamente la viñeta o número de un ítem de lista, permitiendo estilizarlo de forma independiente al texto. Es más elegante que trucos previos con list-style: none y pseudo-elementos ::before. Está limitado a propiedades tipográficas y de color: color, font-*, content, text-decoration, unicode-bidi y animation/transition. No acepta background, padding ni margin.

El soporte de ::marker es universal en navegadores modernos (Chrome 86+, Firefox 68+, Safari 11.1+). Para listas ordenadas, también puedes usar font-variant-numeric: tabular-nums para alinear números correctamente.

li::marker {
  color: #3d7ef5;
  font-weight: 900;
  font-size: 1.2em;
}

/* Número de listas ordenadas */
ol li::marker {
  color: #a855f7;
  font-variant-numeric: tabular-nums;
}

Los contadores CSS permiten numerar automáticamente elementos sin JavaScript. counter-reset crea e inicializa un contador en un elemento padre. counter-increment avanza el contador en cada elemento que lo usa. counter(nombre) o counters(nombre, separador) en la propiedad content de un pseudo-elemento insertan el valor actual. Son perfectos para numeración de secciones, figuras, tablas, notas al pie y listas ordenadas con estilos personalizados.

Los contadores anidados se crean automáticamente: usa counters(sección, '.') para obtener numeración jerárquica tipo 1.2.3 sin lógica adicional.

body { counter-reset: section; }
h2 {
  counter-increment: section;
}
h2::before {
  content: counter(section) ". ";
  color: var(--accent);
}

Las listas anidadas deben colocarse dentro de un <li>, nunca como hijo directo de <ul> o <ol> — esto es un error de validación HTML. Los lectores de pantalla anuncian el nivel de anidación ("lista, nivel 2"), lo que orienta al usuario. Para listas que usan list-style: none como layout, Safari/VoiceOver puede quitarles el rol de lista; añade role="list" explícitamente para preservar la semántica.

No anides listas más de 3-4 niveles de profundidad. A partir de cierto nivel la estructura se vuelve difícil de navegar tanto visualmente como con lectores de pantalla. Si necesitas jerarquías profundas, considera un árbol accesible con role="tree".

<!-- ❌ Error común -->
<ul>
  <li>Padre</li>
  <ul><li>Hijo</li></ul> <!-- MALO -->
</ul>
<!-- ✓ Correcto -->
<ul>
  <li>Padre
    <ul><li>Hijo</li></ul>
  </li>
</ul>