O elemento “label” não deve aparecer como descendente do elemento “a”.

O elemento <a> é classificado como conteúdo interativo, o que significa que espera interação do utilizador (clicar para navegar). O elemento <label> também é interativo — clicar numa etiqueta ativa ou foca o seu controlo de formulário associado. Quando um <label> é aninhado dentro de um <a>, o browser enfrenta uma situação ambígua: deve um clique navegar para o URL do link, ou deve focar/ativar o controlo de formulário associado? A especificação HTML resolve isto simplesmente proibindo completamente o aninhamento.

De acordo com o WHATWG HTML Living Standard, o modelo de conteúdo do elemento <a> é “transparente” mas não deve conter qualquer conteúdo interativo. Uma vez que <label> é conteúdo interativo, não é permitido como descendente de <a> a qualquer profundidade.

Além de ser HTML inválido, este aninhamento causa problemas reais:

• Acessibilidade: Leitores de ecrã podem anunciar papéis conflituosos, confundindo utilizadores que dependem de tecnologia assistiva. O propósito do elemento torna-se pouco claro — é um link ou uma etiqueta de formulário?
• Comportamento imprevisível: Diferentes browsers podem lidar com o evento de clique de forma diferente, levando a experiências de utilizador inconsistentes.
• Associação de formulário quebrada: O atributo for do <label> pode não funcionar como pretendido quando a etiqueta está presa dentro de um link.

A correção é simples: se você apenas precisa de estilizar texto dentro de um link, use um <span> ou outro elemento não-interativo em vez de <label>. Se você realmente precisa tanto de um link como de uma etiqueta, eles devem ser elementos separados, irmãos, em vez de aninhados.

Exemplos

❌ Inválido: <label> dentro de <a>

<a href="/settings">
  <label>Account Settings</label>
</a>

Isto despoleta o erro de validação porque <label> é conteúdo interativo aninhado dentro de <a>.

✅ Corrigido: Substituir <label> por <span>

<a href="/settings">
  <span>Account Settings</span>
</a>

Se o <label> foi usado apenas para propósitos de estilização, um <span> com uma classe CSS alcança o mesmo resultado visual sem violar a especificação.

❌ Inválido: <label> profundamente aninhado dentro de <a>

<a href="/profile">
  <div>
    <label for="username">Edit Username</label>
  </div>
</a>

A regra aplica-se a todos os descendentes, não apenas filhos diretos. Isto ainda é inválido.

✅ Corrigido: Separar o link e a etiqueta

<label for="username">Edit Username</label>
<a href="/profile">View Profile</a>

Quando você precisa tanto de uma etiqueta funcional como de um link, mantenha-os como irmãos em vez de aninhar um dentro do outro.

✅ Corrigido: Usar <span> com uma classe para estilização

<a href="/dashboard">
  <span class="label-style">Dashboard</span>
</a>

.label-style {
  font-weight: bold;
  text-transform: uppercase;
}

Isto preserva qualquer estilização visual que você precise mantendo o HTML válido e o modelo de interação não ambíguo.

Saiba mais:

MDN Reference

HTML label element

→

MDN Reference

HTML a element

→

WHATWG Spec

HTML forms specification

→