Sobre este problema HTML
A especificação HTML é clara neste ponto: uma end tag consiste apenas em </, o nome da tag, espaço em branco opcional, e >. Não são permitidos atributos, valores ou conteúdo extra de qualquer tipo. Esta regra aplica-se universalmente a todos os elementos HTML.
Este erro normalmente ocorre devido a alguns erros comuns:
-
Atributos mal colocados: Um atributo como
classouidfoi acidentalmente digitado na tag de fechamento em vez de (ou em adição à) tag de abertura. - Erros de cópia e colagem: Ao duplicar ou reestruturar código, os atributos podem acabar anexados à tag errada.
-
Erros de digitação ou tags mal formadas: Um
>em falta na tag de abertura pode fazer com que o browser ou validador interprete o que se segue como parte da end tag.
Embora a maioria dos browsers seja tolerante e simplesmente ignore atributos em tags de fechamento, isto continua a ser um problema. Sinaliza markup mal formado que pode causar comportamento imprevisível em parsers, leitores de ecrã e outras ferramentas que processam HTML. Também torna o seu código mais difícil de ler e manter, e pode indicar um problema estrutural mais profundo — como um atributo que deveria estar na tag de abertura e, portanto, não está a ser aplicado de todo.
Exemplos
Atributo acidentalmente colocado na tag de fechamento
Isto desencadeia o erro porque class aparece na end tag </p>:
<p>Welcome to the site.</p class="welcome">
Remova o atributo da tag de fechamento e coloque-o na tag de abertura:
<p class="welcome">Welcome to the site.</p>
Atributo duplicado em ambas as tags
Por vezes os atributos aparecem tanto na tag de abertura como na de fechamento:
<div id="sidebar" class="panel">
<p>Sidebar content</p>
</div id="sidebar">
A correção é remover todos os atributos da tag de fechamento:
<div id="sidebar" class="panel">
<p>Sidebar content</p>
</div>
> em falta na tag de abertura causando uma cascata
Um erro de digitação subtil na tag de abertura pode levar a este erro. Aqui, o > em falta após o <h2 de abertura faz com que o validador interprete mal o markup:
<h2 class="title"Chapter One</h2>
Adicionar o > em falta corrige a estrutura:
<h2 class="title">Chapter One</h2>
Múltiplos elementos com o mesmo erro
Este padrão por vezes aparece quando os programadores adicionam atributos às tags de fechamento como “comentários” informais para acompanhar qual elemento está a ser fechado:
<div class="header">
<nav class="main-nav">
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav class="main-nav">
</div class="header">
Se quiser anotar tags de fechamento para legibilidade, use comentários HTML em vez disso:
<div class="header">
<nav class="main-nav">
<ul>
<li><a href="/">Home</a></li>
</ul>
<!-- .main-nav -->
<!-- .header -->
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.