Validador de Estrutura HTML

O que é Validador de HTML?

Este verificador de HTML encontra os erros estruturais que mais quebram layouts: elementos que nunca são fechados, tags de fechamento na ordem errada, tags de fim sem tag de início, ids e atributos duplicados, <img> sem alt e falta de doctype, <title> ou lang em documentos completos. É uma checagem local rápida, não o validador oficial do W3C (Nu), e não verifica quais elementos são permitidos em cada lugar.

Como usar Validador de HTML

1. Cole um documento ou fragmento HTML.
2. Clique em Validar (os resultados são atualizados enquanto você digita).
3. Leia o resumo de erros e avisos.
4. Use a linha e a coluna de cada item para corrigir sua marcação.

Exemplo

<div id="a">
<span>text</div>
<p id="a">x
<img src="a.png">
</br>

Errors: 3 · Warnings: 1
Line 2, column 1 <span> is not closed before </div>
Line 3, column 4 Duplicate id "a" (first used on line 1)
Line 4, column 1 <img> has no alt attribute
Line 5, column 1 <br> is a void element and must not have a closing tag

Quando usar Validador de HTML

Use-o para localizar rapidamente a tag que quebra um layout, checar templates e HTML de e-mail ou pegar ids duplicados antes que quebrem o JavaScript ou os labels. Para uma checagem completa de conformidade (modelos de conteúdo, ARIA, valores de atributos), use o validador do W3C.

Como funciona Validador de HTML

Um tokenizador lê tags, atributos, comentários e elementos de texto bruto (script, style, textarea, title) enquanto acompanha as posições. Uma pilha de elementos abertos segue as regras do HTML para elementos vazios (br, img, input…) e tags de fim opcionais: </p>, </li>, </td> e semelhantes podem ser omitidas, e um novo <li> ou elemento de bloco fecha implicitamente o anterior, então atalhos válidos do HTML5 não são reportados. Conteúdo SVG e MathML permite tags autofechadas. Qualquer outro elemento ainda aberto quando seu pai fecha, ou no fim da entrada, é um erro.

Casos de Uso Comuns

• ✓ Achar uma div não fechada que quebra o layout de uma página
• ✓ Checar a saída de um CMS ou de templates de e-mail
• ✓ Pegar ids duplicados que quebram referências de label/aria
• ✓ Checagem básica de acessibilidade para imagens sem texto alt

Perguntas Frequentes

Explore mais categorias