Validación HTML: Elemento "div" no permitido como hijo del elemento "ul" en este contexto. (Suprimiendo errores adicionales de este subárbol.)

Acerca de este problema HTML

La especificación HTML define un modelo de contenido estricto para el elemento <ul> (lista desordenada): su contenido permitido es cero o más elementos <li>, opcionalmente entremezclados con elementos <script> y <template>. Un <div> no está entre estos hijos permitidos, por lo que colocar uno directamente dentro de un <ul> produce un error de validación.

Este problema surge comúnmente cuando los desarrolladores intentan agrupar o envolver elementos de lista para propósitos de estilo o diseño. Por ejemplo, podrías querer añadir un contenedor alrededor de ciertos elementos <li> para alineación con flexbox o grid, o podrías estar usando un sistema de plantillas que inyecta elementos <div> envolventes en tu marcado de lista.

Por qué esto importa

Inconsistencias de análisis del navegador: Cuando los navegadores encuentran anidación inválida, intentan corregir la estructura DOM automáticamente, pero diferentes navegadores pueden manejarlo de manera diferente. Esto puede llevar a renderizado inesperado donde los elementos de lista aparecen fuera de su contenedor previsto o los estilos se rompen de manera impredecible.
Accesibilidad: Los lectores de pantalla y tecnologías asistivas dependen de la estructura semántica correcta para transmitir las relaciones de lista a los usuarios. Un <div> rompiendo la relación <ul> → <li> puede causar que las herramientas asistivas interpreten mal o se salten completamente el contenido de la lista.
Cumplimiento de estándares: El HTML inválido puede causar errores en cascada del analizador — nota que el mensaje del validador dice “Suprimiendo errores adicionales de este subárbol”, lo que significa que problemas adicionales dentro de esa estructura pueden estar ocultos para ti.

Cómo solucionarlo

Mover el <div> dentro del <li>: Si necesitas un envoltorio para estilo, colócalo dentro del elemento de lista en lugar de alrededor de él.
Eliminar el <div> completamente: Si no sirve ningún propósito, simplemente elimínalo y deja que los elementos <li> se sitúen directamente dentro del <ul>.
Usar CSS en los elementos <li>: En muchos casos, puedes aplicar los estilos que necesitas directamente a los elementos <li> sin un envoltorio adicional.
Usar role="list" en un <div> padre: Si tu diseño realmente requiere envoltorios <div>, considera reestructurar con roles ARIA, aunque siempre se prefieren los elementos semánticos nativos.

Ejemplos

❌ Incorrecto: `<div>` como hijo directo de `<ul>`

<ul>
  <div>
    <li>Apples</li>
    <li>Bananas</li>
  </div>
  <div>
    <li>Carrots</li>
    <li>Dates</li>
  </div>
</ul>

✅ Correcto: Mover el `<div>` dentro de cada `<li>`

<ul>
  <li><div>Apples</div></li>
  <li><div>Bananas</div></li>
  <li><div>Carrots</div></li>
  <li><div>Dates</div></li>
</ul>

✅ Correcto: Eliminar el `<div>` completamente

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Carrots</li>
  <li>Dates</li>
</ul>

❌ Incorrecto: Usar un `<div>` como envoltorio de estilo alrededor de elementos de lista

<ul class="product-list">
  <div class="row">
    <li>Product A</li>
    <li>Product B</li>
    <li>Product C</li>
  </div>
</ul>

✅ Correcto: Aplicar estilos de diseño directamente a los elementos `<ul>` y `<li>`

<ul class="product-list row">
  <li>Product A</li>
  <li>Product B</li>
  <li>Product C</li>
</ul>

❌ Incorrecto: Plantilla o componente envoltorio insertando un `<div>`

Esto sucede a menudo en frameworks donde un componente renderiza un <div> envolvente:

<ul>
  <div class="list-item-wrapper">
    <li>Item 1</li>
  </div>
  <div class="list-item-wrapper">
    <li>Item 2</li>
  </div>
</ul>

✅ Correcto: Mover la clase envoltorio al propio `<li>`

<ul>
  <li class="list-item-wrapper">Item 1</li>
  <li class="list-item-wrapper">Item 2</li>
</ul>

La misma regla se aplica a los elementos <ol> (lista ordenada) — comparten la misma restricción del modelo de contenido. Siempre asegúrate de que <li> sea el hijo directo de <ul> o <ol>, y coloca cualquier elemento envoltorio adicional dentro del <li> en lugar de alrededor de él.