Verificação HTML: Texto não permitido no elemento "ul" neste contexto.

Sobre este problema HTML

De acordo com a especificação HTML, o modelo de conteúdo para <ul> está estritamente limitado a zero ou mais elementos <li>. Qualquer nó de texto colocado diretamente dentro do <ul> viola esta regra, mesmo que pareça inofensivo ou invisível. Os navegadores podem ainda assim renderizar a página, mas a estrutura DOM resultante é tecnicamente inválida e pode levar a comportamento imprevisível entre diferentes navegadores e tecnologias assistivas.

Isto é importante para a acessibilidade porque os leitores de ecrã dependem da estrutura adequada de listas para anunciar o número de itens e permitir que os utilizadores naveguem entre eles. Nós de texto perdidos dentro de um <ul> podem confundir estas ferramentas, causando má contagem dos itens da lista ou fazendo com que o texto seja lido num contexto inesperado.

Existem vários cenários comuns que desencadeiam este erro:

Texto solto usado como título da lista. Os programadores por vezes colocam um cabeçalho ou etiqueta diretamente dentro do <ul> para descrever a lista. Este texto deve ser movido para fora do elemento de lista.

Entidades   perdidas ou outras entre itens da lista. Isto acontece frequentemente em sistemas de templates ou quando o código é concatenado, onde caracteres   ou outros nós de texto acabam entre elementos <li>. Estes devem ser removidos completamente, uma vez que o espaçamento entre itens da lista deve ser controlado com CSS.

Colocação acidental de conteúdo inline sem o envolver em <li>. Por vezes o conteúdo que deveria ser um item de lista está simplesmente sem o seu wrapper <li>.

Exemplos

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

<ul>
  Frutas
  <li>Maçã</li>
  <li>Laranja</li>
  <li>Banana</li>
</ul>

A palavra “Frutas” é um nó de texto diretamente dentro do <ul>, o que não é permitido.

✅ Mover o título para fora da lista

<h3>Frutas</h3>
<ul>
  <li>Maçã</li>
  <li>Laranja</li>
  <li>Banana</li>
</ul>

Usar um cabeçalho antes da lista é semanticamente claro. Você também pode usar um <p> ou <span> se um cabeçalho não for apropriado.

❌ Entidades ` ` entre itens da lista

<ul>
  <li>Primeiro item</li>
  &nbsp;
  <li>Segundo item</li>
  &nbsp;
  <li>Terceiro item</li>
</ul>

Cada   é um nó de texto posicionado diretamente dentro do <ul>, desencadeando o erro.

✅ Remover as entidades e usar CSS para espaçamento

<ul>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ul>

ul li {
  margin-bottom: 0.5em;
}

Qualquer espaçamento visual entre itens da lista deve ser tratado com CSS margin ou padding, não com entidades HTML.

❌ Conteúdo não envolvido que deveria ser um item de lista

<ul>
  <li>Leite</li>
  Ovos
  <li>Pão</li>
</ul>

✅ Envolver o conteúdo num elemento `<li>`

<ul>
  <li>Leite</li>
  <li>Ovos</li>
  <li>Pão</li>
</ul>

As mesmas regras aplicam-se aos elementos <ol> (listas ordenadas) e <menu> — os seus filhos diretos devem ser elementos <li>, e nós de texto não são permitidos. Se a sua lista é gerada dinamicamente por um motor de templates ou JavaScript, verifique cuidadosamente o resultado para espaços em branco perdidos ou texto que possa ter sido injetado entre itens da lista.