Sobre este problema HTML
Os elementos HTML seguem regras rígidas de aninhamento definidas pelo Padrão Vivo HTML da WHATWG. Cada elemento tem um modelo de conteúdo — uma descrição do que o conteúdo (texto, elementos, ou ambos) pode conter. Quando você coloca um elemento onde não é permitido, o navegador deve adivinhar a sua intenção e pode reestruturar o DOM de formas inesperadas. Isto pode levar a renderização inconsistente entre navegadores, layouts quebrados, e problemas de acessibilidade para leitores de ecrã e outras tecnologias assistivas.
A parte “(A suprimir mais erros desta subárvore.)” da mensagem significa que o validador parou de verificar qualquer coisa aninhada dentro do elemento problemático. Isto é importante — significa que podem haver erros adicionais escondidos por baixo deste. Corrigir este problema de aninhamento pode revelar outros problemas que precisam de atenção.
Aqui estão alguns dos casos mais comuns que desencadeiam este erro:
-
Elementos de bloco dentro de elementos inline: Colocar um
<div>dentro de um<span>ou um<a>que não permite conteúdo de fluxo nesse contexto. -
Filhos de lista inválidos: Colocar
<div>,<p>, ou outros elementos diretamente dentro de<ul>ou<ol>, que apenas permitem<li>(e<script>/<template>) como filhos diretos. -
Estrutura de tabela inválida: Colocar
<td>diretamente dentro de<table>sem o envolver em<tr>, ou colocar elementos não-tabela onde apenas<thead>,<tbody>,<tfoot>, ou<tr>são esperados. -
Cabeçalhos ou parágrafos dentro de
<p>: O elemento<p>apenas aceita conteúdo de fraseado, então aninhar um<h2>ou outro<p>dentro dele é inválido. -
Elementos interativos dentro de elementos interativos: Aninhar um
<button>dentro de um<a>, ou um<a>dentro de um<button>.
Para corrigir o problema, consulte a documentação MDN para o elemento pai e verifique a sua seção Permitted content. Depois mova o elemento filho para um local válido, envolva-o num elemento intermediário apropriado, ou substitua o pai ou filho por um elemento mais adequado.
Exemplos
Filhos de lista inválidos
Um <ul> apenas permite elementos <li> como filhos diretos.
❌ Incorreto:
<ul>
<div>
<li>Item um</li>
<li>Item dois</li>
</div>
</ul>✅ Correto:
<ul>
<li>Item um</li>
<li>Item dois</li>
</ul>Elemento de bloco dentro de um parágrafo
O elemento <p> apenas aceita conteúdo de fraseado. Um <div> é conteúdo de fluxo e não pode ser aninhado dentro dele.
❌ Incorreto:
<p>
Aqui está algum texto.
<div class="highlight">Isto está destacado.</div>
</p>✅ Correto:
<p>Aqui está algum texto.</p>
<div class="highlight">Isto está destacado.</div>
Ou use um <span> se quiser estilização inline dentro do parágrafo:
<p>
Aqui está algum texto.
<span class="highlight">Isto está destacado.</span>
</p>Estrutura de tabela inválida
As células de tabela (<td>) devem estar dentro de um <tr>, que por sua vez deve estar dentro de <thead>, <tbody>, <tfoot>, ou diretamente dentro de <table>.
❌ Incorreto:
<table>
<td>Nome</td>
<td>Idade</td>
</table>✅ Correto:
<table>
<tr>
<td>Nome</td>
<td>Idade</td>
</tr>
</table>Elementos interativos aninhados dentro de elementos interativos
Um <button> não pode ser colocado dentro de um elemento <a>, e vice versa, porque conteúdo interativo não pode ser aninhado dentro de outro conteúdo interativo.
❌ Incorreto:
<a href="/dashboard">
<button>Ir para o Dashboard</button>
</a>✅ Correto (escolha um ou outro):
<a href="/dashboard">Ir para o Dashboard</a>Ou estilize um link para parecer um botão usando CSS:
<a href="/dashboard" class="button">Ir para o Dashboard</a>
Elementos envolventes dentro de <select>
O elemento <select> apenas permite <option>, <optgroup>, e elementos de script como filhos.
❌ Incorreto:
<select>
<div>
<option>Maçã</option>
<option>Banana</option>
</div>
</select>✅ Correto:
<select>
<optgroup label="Frutas">
<option>Maçã</option>
<option>Banana</option>
</optgroup>
</select>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.