Verificação HTML: O elemento X está sem o atributo obrigatório Y.

Sobre este problema HTML

Os atributos obrigatórios existem porque fornecem informações fundamentais para o propósito do elemento. Por exemplo, um elemento <img> sem um atributo src não tem imagem para exibir, e sem um atributo alt, as tecnologias assistivas não têm texto de fallback para descrever a imagem. Um elemento <link> sem rel não dá ao navegador forma de entender a relação do recurso ligado. Quando omite um atributo obrigatório, várias coisas podem correr mal:

Problemas de acessibilidade: Leitores de ecrã e outras tecnologias assistivas dependem de atributos específicos para transmitir significado. Um alt em falta num <img> deixa utilizadores com deficiência visual sem qualquer descrição do conteúdo.
Funcionalidade quebrada: Alguns elementos simplesmente não funcionam sem os seus atributos obrigatórios. Um <form> com um <input> que está sem um atributo type pode ainda renderizar (os navegadores assumem type="text" por defeito), mas outros elementos como <map> sem name não funcionarão como pretendido.
Não conformidade com os padrões: Omitir atributos obrigatórios produz HTML inválido, o que pode levar a renderização imprevisível em diferentes navegadores.

Para corrigir este problema, identifique que atributo está em falta no elemento assinalado pelo validador, depois adicione-o com um valor apropriado. Aqui estão elementos comuns e os seus atributos obrigatórios:

Elemento	Atributo(s) Obrigatório(s)
`<img>`	`src`, `alt`
`<link>`	`rel`
`<script>`	`src` (se sem conteúdo inline)
`<input>`	`type` (recomendado)
`<meta>`	`charset`, `name`, ou `http-equiv` (pelo menos um)
`<map>`	`name`
`<bdo>`	`dir`
`<style>`	Nenhum no HTML5, mas `type` era obrigatório no HTML4

Exemplos

Atributo `alt` em falta no `<img>`

Este é um dos erros de validação mais comuns. O atributo alt é obrigatório em todos os elementos <img>.

❌ Incorreto — atributo alt em falta:

<img src="photo.jpg">

✅ Correto — atributo alt fornecido:

<img src="photo.jpg" alt="Um pôr do sol sobre o oceano">

Se a imagem é puramente decorativa e não transporta conteúdo significativo, use um atributo alt vazio:

<img src="decorative-border.png" alt="">

Atributo `rel` em falta no `<link>`

O atributo rel indica ao navegador para que serve o recurso ligado.

❌ Incorreto — atributo rel em falta:

<link href="styles.css">

✅ Correto — atributo rel fornecido:

<link rel="stylesheet" href="styles.css">

Atributo `name` em falta no `<map>`

O elemento <map> requer um atributo name para que possa ser referenciado pelo atributo usemap de um elemento <img>.

❌ Incorreto — atributo name em falta:

<map>
  <area shape="rect" coords="0,0,100,100" href="/section" alt="Section">
</map>

✅ Correto — atributo name fornecido:

<map name="navigation">
  <area shape="rect" coords="0,0,100,100" href="/section" alt="Section">
</map>
<img src="nav.png" alt="Site navigation" usemap="#navigation">

Atributo `dir` em falta no `<bdo>`

O elemento <bdo> (bidirectional override) existe especificamente para sobrepor a direção do texto, por isso o atributo dir é essencial.

❌ Incorreto — atributo dir em falta:

<p>The word in Arabic is <bdo>مرحبا</bdo>.</p>

✅ Correto — atributo dir fornecido:

<p>The word in Arabic is <bdo dir="rtl">مرحبا</bdo>.</p>

Quando encontrar este erro de validação, leia a mensagem do validador cuidadosamente — ela dir-lhe-á exatamente qual elemento e qual atributo está em falta. Adicione o atributo com um valor significativo apropriado para o seu conteúdo, e revalide para confirmar que o problema foi resolvido.