Verificação HTML: Tag de fecho "a" viola as regras de aninhamento.

Sobre este problema HTML

A especificação HTML proíbe explicitamente o aninhamento de elementos <a> dentro de outros elementos <a>. Isto está definido como parte do modelo de conteúdo para o elemento <a> — é “transparente” mas não deve conter qualquer conteúdo interativo, o que inclui outros elementos <a>. Quando o validador encontra um tag de fecho </a> que violaria estas regras de aninhamento, gera este erro.

Isto acontece tipicamente num de dois cenários:

Um tag de fecho </a> em falta — Você esquece-se de fechar um link, por isso o próximo link parece estar aninhado dentro dele.
Envolver intencionalmente um link dentro de outro — Você tenta colocar um link clicável dentro de uma área clicável maior, o que é HTML inválido.

Porque isto importa

Quando um elemento <a> está aninhado dentro de outro elemento <a>, os navegadores têm de adivinhar o que você pretendia. Diferentes navegadores podem lidar com isto de forma diferente — alguns fecharão automaticamente o primeiro link antes de iniciar o segundo, enquanto outros podem produzir estruturas DOM inesperadas. Isto leva a:

Comportamento imprevisível — Os alvos de clique podem não funcionar como esperado em diferentes navegadores.
Problemas de acessibilidade — Os leitores de ecrã dependem de um DOM bem estruturado. O aninhamento ambíguo confunde as tecnologias assistivas e torna a navegação difícil para utilizadores que dependem delas.
Estilização quebrada — Os seletores CSS que dependem de relações pai-filho adequadas podem não ser aplicados corretamente.

Como corrigir

Encontre os tags <a> problemáticos — O validador apontará para a linha com o </a> de fecho problemático. Olhe para essa linha e as linhas acima para encontrar onde o problema de aninhamento começa.
Adicione tags de fecho em falta — Se você esqueceu um </a>, adicione-o antes do próximo <a> abrir.
Reestruture se necessário — Se você pretendia ter um link dentro de uma área clicável maior, redesenhe a marcação para que os links sejam irmãos em vez de aninhados.

Exemplos

❌ Tag de fecho em falta causa aninhamento implícito

O primeiro <a> nunca é fechado, por isso o segundo <a> parece estar aninhado dentro dele:

<nav>
  <a href="one.html">Página 1
  <a href="two.html">Página 2</a>
</nav>

✅ Corrigido adicionando o tag de fecho em falta

<nav>
  <a href="one.html">Página 1</a>
  <a href="two.html">Página 2</a>
</nav>

❌ Aninhamento intencional de links (inválido)

Envolver um link dentro de um link maior não é permitido, mesmo que pareça útil para fins de interface:

<a href="/article">
  <h2>Título do Artigo</h2>
  <p>Um resumo curto do artigo.</p>
  <a href="/author">Nome do Autor</a>
</a>

✅ Corrigido reestruturando com links irmãos

Use posicionamento CSS ou uma estratégia de layout diferente para conseguir o mesmo resultado visual sem aninhamento:

<article>
  <a href="/article">
    <h2>Título do Artigo</h2>
    <p>Um resumo curto do artigo.</p>
  </a>
  <p>Por <a href="/author">Nome do Autor</a></p>
</article>

❌ Esquecer de fechar links numa lista

Isto é especialmente comum em menus de navegação construídos com listas:

<ul>
  <li><a href="/home">Início</li>
  <li><a href="/about">Sobre</a></li>
  <li><a href="/contact">Contacto</a></li>
</ul>

Aqui, o primeiro <a> nunca é fechado. O tag </li> fecha implicitamente o <li>, mas o <a> permanece aberto, causando problemas de aninhamento com os links subsequentes.

✅ Corrigido fechando adequadamente cada link

<ul>
  <li><a href="/home">Início</a></li>
  <li><a href="/about">Sobre</a></li>
  <li><a href="/contact">Contacto</a></li>
</ul>

Um bom hábito é escrever tanto os tags de abertura como de fecho <a> juntos antes de preencher o conteúdo. Isto previne omissões acidentais e mantém o seu HTML bem estruturado.