A tag de fecho “em” viola as regras de aninhamento.

O HTML requer que os elementos sejam adequadamente aninhados, o que significa que deve fechar elementos filhos antes de fechar os seus elementos pais. Quando uma tag de fecho </em> aparece no local errado — como antes de um elemento interior ter sido fechado, ou depois de um elemento exterior já ter sido fechado — o navegador encontra tags sobrepostas que violam a especificação HTML. Isto é às vezes chamado “sopa de tags.”

Os navegadores tentam recuperar de tags sobrepostas, mas a forma como o fazem é imprevisível e pode não corresponder à sua intenção. Um navegador pode fechar automaticamente o elemento interior, enquanto outro pode reestruturar o DOM de forma diferente. Isto pode levar a renderização inconsistente, estilos quebrados e comportamento inesperado entre navegadores. Também cria problemas para tecnologias assistivas como leitores de ecrã, que dependem de uma árvore de documento bem formada para transmitir significado aos utilizadores.

A regra de aninhamento é simples: os elementos devem fechar na ordem inversa à que foram abertos. Se abrir <em> e depois abrir <a>, deve fechar </a> primeiro, depois </em>. Pense nisso como empilhar caixas — não pode remover uma caixa de baixo sem primeiro remover a que está em cima.

Este problema pode também surgir quando <em> é usado através de fronteiras de elementos de bloco. Por exemplo, envolver <em> em torno de múltiplos elementos <p> ou fechar </em> dentro de um <div> quando foi aberto fora dele também irá desencadear este erro.

Exemplos

Sobreposição com um elemento inline

A tag </em> fecha antes da tag <a> aninhada, criando elementos sobrepostos:

<!-- ❌ Errado: <em> fecha antes de <a> -->

<p><em><a href="#">link</em></a></p>

Feche primeiro o elemento interior <a>, depois o exterior <em>:

<!-- ✅ Correto: tags fecham em ordem inversa -->

<p><em><a href="#">link</a></em></p>

Sobreposição com um elemento de bloco

O elemento <em> estende-se através de uma fronteira <p>, o que não é permitido:

<!-- ❌ Errado: <em> aberto num <p> e fechado noutro -->

<p>Este é <em>texto enfatizado</p>
<p>que continua aqui</em> num novo parágrafo.</p>

Aplique <em> separadamente dentro de cada elemento <p>:

<!-- ✅ Correto: <em> está adequadamente contido dentro de cada <p> -->

<p>Este é <em>texto enfatizado</em></p>
<p><em>que continua aqui</em> num novo parágrafo.</p>

Múltiplos níveis de aninhamento

Com elementos profundamente aninhados, cada tag deve ainda fechar em ordem inversa estrita:

<!-- ❌ Errado: </em> fecha antes de </strong> -->

<p><em><strong>negrito e itálico</em></strong></p>

<!-- ✅ Correto: </strong> fecha primeiro, depois </em> -->

<p><em><strong>negrito e itálico</strong></em></p>

<em> atravessando uma fronteira <div>

<!-- ❌ Errado: <em> aberto fora do <div>, fechado dentro -->

<em>
<div>
  <p>Algum conteúdo</p>
</em>
</div>

Mantenha o elemento <em> inteiramente dentro ou fora do elemento de bloco:

<!-- ✅ Correto: <em> está totalmente contido dentro do <div> -->

<div>
  <p><em>Algum conteúdo</em></p>
</div>

Como identificar e corrigir estes erros

1. Leia a mensagem de erro cuidadosamente. O validador W3C geralmente indica-lhe em que linha está o problema e que tags estão envolvidas.
2. Corresponda cada tag de abertura com a sua tag de fecho. Trace através do aninhamento para se certificar de que cada par está adequadamente contido dentro do seu pai.
3. Use indentação consistente. Código adequadamente indentado torna problemas de aninhamento muito mais fáceis de ver rapidamente.
4. Verifique erros de copiar-colar. Tags sobrepostas frequentemente infiltram-se quando o código é movido entre elementos sem atualizar as tags circundantes.

Saiba mais:

MDN Reference

MDN - em - The Emphasis element

→