Verificação HTML: Elemento "div" não permitido como filho do elemento "ul" neste contexto. (Suprimindo erros adicionais desta subárvore.)

Sobre este problema HTML

A especificação HTML define um modelo de conteúdo rigoroso para o elemento <ul> (lista não ordenada): o seu conteúdo permitido são zero ou mais elementos <li>, opcionalmente intercalados com elementos <script> e <template>. Um <div> não está entre estes filhos permitidos, por isso colocar um diretamente dentro de um <ul> produz um erro de validação.

Este problema surge frequentemente quando os programadores tentam agrupar ou envolver itens de lista para fins de estilo ou layout. Por exemplo, pode querer adicionar um contentor à volta de certos elementos <li> para alinhamento flexbox ou grid, ou pode estar a usar um sistema de templates que injeta elementos <div> de envolvimento na sua marcação de lista.

Porque isto é importante

Inconsistências na análise do browser: Quando os browsers encontram aninhamento inválido, tentam corrigir automaticamente a estrutura DOM, mas diferentes browsers podem lidar com isto de forma diferente. Isto pode levar a renderização inesperada onde os itens de lista aparecem fora do seu contentor pretendido ou os estilos falham de forma imprevisível.
Acessibilidade: Leitores de ecrã e tecnologias assistivas dependem da estrutura semântica correta para transmitir relações de lista aos utilizadores. Um <div> que quebra a relação <ul> → <li> pode fazer com que as ferramentas assistivas interpretem mal ou ignorem completamente o conteúdo da lista.
Conformidade com padrões: HTML inválido pode causar erros de análise em cascata — note que a mensagem do validador diz “Suprimindo erros adicionais desta subárvore,” significando que problemas adicionais dentro dessa estrutura podem estar ocultos de si.

Como corrigir

Mover o <div> para dentro do <li>: Se precisar de um invólucro para estilo, coloque-o dentro do item da lista em vez de à volta dele.
Remover o <div> completamente: Se não serve nenhum propósito, simplesmente remova-o e deixe os elementos <li> ficarem diretamente dentro do <ul>.
Usar CSS nos elementos <li>: Em muitos casos, pode aplicar os estilos que precisa diretamente aos elementos <li> sem um invólucro extra.
Usar role="list" num <div> pai: Se o seu layout realmente necessitar de invólucros <div>, considere reestruturar com roles ARIA, embora elementos semânticos nativos sejam sempre preferíveis.

Exemplos

❌ Incorreto: `<div>` como filho direto de `<ul>`

<ul>
  <div>
    <li>Maçãs</li>
    <li>Bananas</li>
  </div>
  <div>
    <li>Cenouras</li>
    <li>Tâmaras</li>
  </div>
</ul>

✅ Correto: Mover o `<div>` para dentro de cada `<li>`

<ul>
  <li><div>Maçãs</div></li>
  <li><div>Bananas</div></li>
  <li><div>Cenouras</div></li>
  <li><div>Tâmaras</div></li>
</ul>

✅ Correto: Remover o `<div>` completamente

<ul>
  <li>Maçãs</li>
  <li>Bananas</li>
  <li>Cenouras</li>
  <li>Tâmaras</li>
</ul>

❌ Incorreto: Usar um `<div>` como invólucro de estilo à volta de itens de lista

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

✅ Correto: Aplicar estilos de layout diretamente aos elementos `<ul>` e `<li>`

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

❌ Incorreto: Template ou invólucro de componente inserindo um `<div>`

Isto acontece frequentemente em frameworks onde um componente renderiza um <div> de envolvimento:

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

✅ Correto: Mover a classe do invólucro para o próprio `<li>`

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

A mesma regra aplica-se aos elementos <ol> (lista ordenada) — eles partilham a mesma restrição de modelo de conteúdo. Certifique-se sempre de que <li> é o filho direto de <ul> ou <ol>, e coloque quaisquer elementos de invólucro adicionais dentro do <li> em vez de à volta dele.