Sobre este problema HTML
O analisador HTML espera que uma barra dentro de uma tag sinalize o fim de um elemento auto-fechado (void), como <br /> ou <img />. Quando o analisador encontra um / que não é imediatamente seguido por >, não consegue interpretar a tag corretamente e gera este erro. Isto pode acontecer em vários cenários:
-
Um erro de digitação num nome ou valor de atributo, como digitar acidentalmente um
/em vez de outro caractere. - Um valor de atributo sem aspas que contém uma barra, como um caminho de URL.
- Uma barra mal posicionada algures no meio de uma tag.
Embora os navegadores sejam geralmente tolerantes e possam ainda renderizar a página, depender da recuperação de erros leva a comportamento imprevisível entre diferentes navegadores. Corrigir estas questões garante que a sua marcação é inequívoca, compatível com os padrões, e mais fácil de manter.
Exemplos
Barra perdida numa tag (erro de digitação)
Um erro de digitação comum onde uma barra aparece entre atributos:
<!-- ❌ Barra não imediatamente seguida por ">" -->
<input type="text" / name="username">Remova a barra perdida:
<!-- ✅ Correto -->
<input type="text" name="username">Valor de atributo sem aspas contendo uma barra
Se um valor de atributo contém um / e não está envolvido em aspas, o analisador vê a barra como parte da sintaxe da tag em vez do valor:
<!-- ❌ Valor sem aspas com barra confunde o analisador -->
<img src=images/photo.jpg alt="Photo">Coloque sempre valores de atributo entre aspas, especialmente aqueles que contêm barras:
<!-- ✅ Correto: valor de atributo entre aspas -->
<img src="images/photo.jpg" alt="Photo">Barra na posição errada para tags auto-fechadas
Colocar a barra antes do atributo final em vez de no final da tag:
<!-- ❌ Barra não está imediatamente antes de ">" -->
<img src="logo.png" / alt="Logo">Mova a barra de auto-fechamento para o final, ou simplesmente remova-a (a sintaxe de auto-fechamento é opcional em HTML5 para elementos void):
<!-- ✅ Correto: barra no final -->
<img src="logo.png" alt="Logo" />
<!-- ✅ Também correto: não é necessária barra de auto-fechamento em HTML -->
<img src="logo.png" alt="Logo">Barra dupla acidental
Às vezes uma tag auto-fechada acaba com uma barra extra:
<!-- ❌ Barra dupla antes de ">" -->
<br //>Use uma única barra ou omita-a completamente:
<!-- ✅ Correto -->
<br />
<!-- ✅ Também correto -->
<br>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.