Verificação HTML: Encontrado "<" quando se esperava um nome de atributo. Causa provável: falta um ">" imediatamente antes.

Sobre este problema HTML

Quando o analisador HTML lê uma tag, espera uma sequência específica: o nome da tag, depois atributos opcionais (cada um com um nome, opcionalmente seguido de = e um valor), e finalmente um > de fecho. Se o analisador encontra um carácter < numa posição onde está à procura de um nome de atributo, significa que algo correu estruturalmente mal. O analisador interpreta o < como o início de uma nova tag, mas como ainda está dentro da definição da tag atual, levanta este erro.

Este problema surge comummente de três cenários:

Um carácter < perdido dentro de uma tag — talvez de um erro de digitação ou erro de copiar-colar.
Um > em falta numa tag anterior — fazendo com que o analisador trate o < da próxima tag como se ainda fizesse parte dos atributos da tag anterior.
Tags incorretamente aninhadas ou sobrepostas — onde um elemento é acidentalmente colocado dentro da tag de abertura de outro elemento.

Isto é importante porque os browsers lidam com HTML mal formado de forma imprevisível. Um browser pode silenciosamente ignorar o carácter perdido, enquanto outro pode descartar o elemento inteiro ou renderizar o conteúdo incorretamente. Corrigir estes erros estruturais garante renderização consistente em todos os browsers e melhora a acessibilidade, já que leitores de ecrã e outras tecnologias assistivas dependem de marcação bem formada para interpretar a estrutura da página.

Exemplos

Carácter `<` perdido dentro de uma tag

Um erro de digitação comum onde um < extra aparece antes do fecho de uma tag auto-fechada ou entre atributos:

<!-- ❌ Carácter "<" perdido dentro da tag img -->

<img src="photo.jpg" alt="smiling cat" < />

Remova o carácter < perdido:

<!-- ✅ Corrigido: sem "<" extra -->

<img src="photo.jpg" alt="smiling cat" />

`>` em falta numa tag anterior

Quando uma tag está sem o seu > de fecho, o analisador continua a ler a próxima tag como se fizesse parte dos atributos da primeira tag:

<!-- ❌ A <div> de abertura está sem o seu ">" de fecho -->

<div class="wrapper"
<p>Hello, world!</p>
</div>

O analisador vê <p> enquanto ainda está dentro da tag <div>, desencadeando o erro. Adicione o > em falta:

<!-- ✅ Corrigido: <div> está devidamente fechada -->

<div class="wrapper">
  <p>Hello, world!</p>
</div>

`>` em falta numa tag com múltiplos atributos

Isto acontece frequentemente com tags que têm muitos atributos, tornando fácil perder o > de fecho:

<!-- ❌ A tag <a> está sem o seu ">" de fecho -->

<a href="/about" class="nav-link" id="about-link"
<span>About Us</span>
</a>

<!-- ✅ Corrigido: ">" de fecho adicionado à tag <a> -->

<a href="/about" class="nav-link" id="about-link">
  <span>About Us</span>
</a>

Parêntesis angular acidental num valor de atributo

Se um valor de atributo contém um < que não está devidamente entre aspas, o analisador pode interpretá-lo mal:

<!-- ❌ Valor de atributo sem aspas ou partido com "<" -->

<div title=5<10>
  <p>Content</p>
</div>

Garanta que valores de atributos que contêm caracteres especiais estão devidamente entre aspas e use entidades HTML onde necessário:

<!-- ✅ Corrigido: valor está entre aspas e usa uma entidade para "<" -->

<div title="5&lt;10">
  <p>Content</p>
</div>

Como depurar este erro

Quando vir este erro, siga estes passos:

Vá ao número da linha reportado pelo validador.
Olhe para a tag nessa linha — verifique se tem um carácter < perdido.
Se a tag parece estar bem, verifique a tag imediatamente antes dela — um > em falta na tag anterior é frequentemente o verdadeiro culpado.
Verifique que todos os valores de atributos estão devidamente entre aspas — valores sem aspas que contêm < podem desencadear este erro.
Use um editor de código com realce de sintaxe — tags desajustadas ou partidas são normalmente fáceis de detetar quando as cores da sintaxe parecem erradas.