Validación HTML: Texto no permitido en el elemento "ul" en este contexto.

Acerca de este problema HTML

Según la especificación HTML, el modelo de contenido para <ul> está estrictamente limitado a cero o más elementos <li>. Cualquier nodo de texto colocado directamente dentro del <ul> viola esta regla, incluso si parece inofensivo o invisible. Los navegadores pueden seguir renderizando la página, pero la estructura DOM resultante es técnicamente inválida y puede llevar a comportamientos impredecibles en diferentes navegadores y tecnologías de asistencia.

Esto importa para la accesibilidad porque los lectores de pantalla dependen de la estructura apropiada de listas para anunciar el número de elementos y permitir a los usuarios navegar entre ellos. Los nodos de texto dispersos dentro de un <ul> pueden confundir estas herramientas, causando que los elementos de lista se cuenten mal o que el texto se lea en un contexto inesperado.

Hay varios escenarios comunes que desencadenan este error:

Texto suelto usado como título de lista. Los desarrolladores a veces colocan un encabezado o etiqueta directamente dentro del <ul> para describir la lista. Este texto debe moverse fuera del elemento de lista.

Entidades   dispersas u otras entre elementos de lista. Esto a menudo sucede en sistemas de plantillas o cuando el código se concatena, donde caracteres   u otros nodos de texto terminan entre elementos <li>. Estos deben eliminarse por completo, ya que el espaciado entre elementos de lista debe controlarse con CSS.

Colocar accidentalmente contenido en línea sin envolverlo en <li>. A veces el contenido que debería ser un elemento de lista simplemente carece de su envoltorio <li>.

Ejemplos

❌ Texto usado como título de lista dentro de `<ul>`

<ul>
  Frutas
  <li>Manzana</li>
  <li>Naranja</li>
  <li>Plátano</li>
</ul>

La palabra “Frutas” es un nodo de texto directamente dentro del <ul>, lo cual no está permitido.

✅ Mueve el título fuera de la lista

<h3>Frutas</h3>
<ul>
  <li>Manzana</li>
  <li>Naranja</li>
  <li>Plátano</li>
</ul>

Usar un encabezado antes de la lista es semánticamente claro. También puedes usar un <p> o <span> si un encabezado no es apropiado.

❌ Entidades ` ` entre elementos de lista

<ul>
  <li>Primer elemento</li>
  &nbsp;
  <li>Segundo elemento</li>
  &nbsp;
  <li>Tercer elemento</li>
</ul>

Cada   es un nodo de texto situado directamente dentro del <ul>, desencadenando el error.

✅ Elimina las entidades y usa CSS para el espaciado

<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ul>

ul li {
  margin-bottom: 0.5em;
}

Cualquier espaciado visual entre elementos de lista debe manejarse con CSS margin o padding, no con entidades HTML.

❌ Contenido sin envolver que debería ser un elemento de lista

<ul>
  <li>Leche</li>
  Huevos
  <li>Pan</li>
</ul>

✅ Envuelve el contenido en un elemento `<li>`

<ul>
  <li>Leche</li>
  <li>Huevos</li>
  <li>Pan</li>
</ul>

Las mismas reglas aplican a elementos <ol> (listas ordenadas) y <menu> — sus hijos directos deben ser elementos <li>, y los nodos de texto no están permitidos. Si tu lista se genera dinámicamente por un motor de plantillas o JavaScript, revisa cuidadosamente la salida para detectar espacios en blanco dispersos o texto que pueda haber sido inyectado entre elementos de lista.