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 asistivas.

Esto importa para la accesibilidad porque los lectores de pantalla dependen de la estructura adecuada de las listas para anunciar el número de elementos y permitir a los usuarios navegar entre ellos. Los nodos de texto sueltos dentro de un <ul> pueden confundir estas herramientas, causando que los elementos de la 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   u otras sueltas entre elementos de lista. Esto sucede a menudo 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 no tiene su envoltorio <li>.

Ejemplos

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

<ul>
  Fruits
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

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

✅ Mueve el título fuera de la lista

<h3>Fruits</h3>
<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</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>First item</li>
  &nbsp;
  <li>Second item</li>
  &nbsp;
  <li>Third item</li>
</ul>

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

✅ Elimina las entidades y usa CSS para el espaciado

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</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>Milk</li>
  Eggs
  <li>Bread</li>
</ul>

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

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

Las mismas reglas aplican para 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 sueltos o texto que pueda haberse inyectado entre elementos de lista.