Verificação HTML: Atributo "X" não permitido no elemento "Y" neste ponto.

Sobre este problema HTML

Cada elemento HTML tem um conjunto definido de atributos que aceita. A especificação HTML mantém regras rigorosas sobre quais atributos pertencem a quais elementos. Por exemplo, o atributo href é válido num elemento <a> mas não num <div>. O atributo for pertence aos elementos <label> e <output> mas não a <span>. Quando coloca um atributo num elemento que não o reconhece, o validador sinaliza o erro.

Esta questão é importante por várias razões. Primeiro, os browsers podem ignorar silenciosamente atributos não reconhecidos, o que significa que o seu código pode parecer funcionar mas na realidade não está a fazer nada — levando a bugs difíceis de diagnosticar. Segundo, as tecnologias assistivas como leitores de ecrã dependem de HTML válido para interpretar corretamente a estrutura e comportamento da página. Atributos inválidos podem confundir estas ferramentas e degradar a acessibilidade. Terceiro, HTML conforme com os padrões garante comportamento consistente em todos os browsers e protege o seu código para o futuro.

Existem várias causas comuns deste erro:

Erros de escrita ou ortografia — Escrever hieght em vez de height, ou scr em vez de src.
Atributos no elemento errado — Usar placeholder num <div> em vez de num <input> ou <textarea>.
Atributos obsoletos — Usar atributos de apresentação como align, bgcolor, ou border que foram removidos da especificação HTML em favor do CSS.
Atributos específicos de frameworks — Usar atributos como ng-click (Angular), v-if (Vue), ou @click (forma abreviada do Vue) que não fazem parte do HTML padrão. Estes frameworks tipicamente processam-nos antes do browser os ver, mas o HTML bruto não vai validar.
Atributos personalizados sem o prefixo data-* — Inventar os seus próprios atributos como tooltip ou status sem seguir a convenção data-*.
Atributos ARIA com erros de escrita — Escrever aria-role em vez do correto role, ou aria-labelled em vez de aria-labelledby.

Exemplos

Atributo usado no elemento errado

O atributo placeholder só é válido nos elementos <input> e <textarea>:

<!-- ❌ "placeholder" não permitido em "div" -->

<div placeholder="Introduza texto aqui">Conteúdo</div>

<!-- ✅ Use placeholder num elemento suportado -->

<input type="text" placeholder="Introduza texto aqui">

Atributo de apresentação obsoleto

O atributo align foi removido da maioria dos elementos no HTML5. Use CSS em vez disso:

<!-- ❌ "align" não permitido em "div" -->

<div align="center">Conteúdo centrado</div>

<!-- ✅ Use CSS para apresentação -->

<div style="text-align: center;">Conteúdo centrado</div>

Atributo personalizado sem prefixo `data-*`

Se precisa de armazenar dados personalizados num elemento, use o formato de atributo data-*:

<!-- ❌ "tooltip" não permitido em "span" -->

<span tooltip="Mais informação">Passe o rato sobre mim</span>

<!-- ✅ Use um atributo data-* para dados personalizados -->

<span data-tooltip="Mais informação">Passe o rato sobre mim</span>

Os atributos data-* são especificamente desenhados para incorporar dados personalizados. Pode acedê-los em JavaScript através da propriedade dataset, por exemplo, element.dataset.tooltip.

Atributo mal escrito

Um simples erro de escrita pode desencadear este erro:

<!-- ❌ "widht" não permitido em "img" -->

<img src="photo.jpg" widht="300" alt="Uma foto">

<!-- ✅ Corrija a ortografia -->

<img src="photo.jpg" width="300" alt="Uma foto">

Erro de escrita em atributo ARIA

Os atributos ARIA devem corresponder exatamente aos nomes da sua especificação:

<!-- ❌ "aria-labelled" não permitido em "input" -->

<input type="text" aria-labelled="name-label">

<!-- ✅ Use o nome correto do atributo ARIA -->

<input type="text" aria-labelledby="name-label">

Atributos específicos de frameworks

Se está a usar um framework JavaScript e quer que os seus templates fonte validem, esteja ciente de que a sintaxe específica de frameworks não vai passar a validação. No Vue, por exemplo, pode usar o equivalente data-* ou aceitar que os templates são pré-processados:

<!-- ❌ "v-if" não permitido em "div" -->

<div v-if="isVisible">Olá</div>

<!-- Isto é esperado com templates Vue e tipicamente não é uma preocupação,
     uma vez que o framework processa estes antes de chegarem ao browser. -->

Quando encontrar este erro, consulte a referência da MDN Web Docs para o elemento em questão para ver quais atributos realmente suporta. Isto vai rapidamente esclarecer se precisa de corrigir um erro de escrita, mover o atributo para um elemento diferente, substituí-lo por CSS, ou convertê-lo para um atributo data-*.