Entregou um projeto, abriu-o no navegador e o layout desfez-se. Verificou num tablet e o menu estava distorcido. O cliente escreve: «no meu Safari está tudo cinzento». Parece-lhe familiar?

A raiz do problema é código inválido. Uma etiqueta não fechada, um ponto e vírgula em falta no CSS ou um erro de sintaxe em JavaScript e o navegador «adivinha» por si. Cada navegador adivinha de forma diferente. O resultado é o caos.

Felizmente, verificar a validade do código em 2026 é mais fácil do que nunca. Serviços online, extensões de navegador e as DevTools integradas encontram erros em segundos, não numa noite de depuração. Abaixo estão as ferramentas que usamos na prática e que funcionam.

💡 Visão geral rápida:

• Abra o validator.w3.org e verifique o HTML da sua página: demora 10 segundos
• Para CSS, use o jigsaw.w3.org/css-validator: mostra avisos sobre incompatibilidade com navegadores específicos
• Verifique o JavaScript através do ESLint ou da consola do navegador integrada: os erros de sintaxe são destacados imediatamente
• Instale a extensão Web Developer para o Chrome: dá acesso com um clique aos validadores do W3C
• Para verificação em lote de dezenas de páginas, use o Total Validator: verifica HTML, CSS, links e ortografia numa só passagem

Tabela comparativa

1. Validadores online do W3C

Validator.w3.org

O W3C Markup Validation Service é o validador oficial do consórcio que desenvolve os padrões da web. Desde 2025, funciona com o motor Nu Html Checker, que é mais moderno e preciso do que o antigo analisador SGML.

Pode verificar uma página de três formas: por URL, carregando um ficheiro HTML ou colando o código diretamente. O relatório mostra os erros com números de linha e recomendações específicas para correções. Note que o validador verifica a conformidade com o padrão, e não «se o site funciona». Um selo verde do W3C não garante que a página tenha o mesmo aspeto em todos os navegadores.

Na prática, fazemos uma verificação através do validator.w3.org em cada reformulação. Ele deteta etiquetas não fechadas e atributos não padronizados que a inspeção visual não percebe.

Jigsaw.w3.org

O W3C CSS Validation Service verifica a conformidade das folhas de estilo com a especificação. Pode especificar o perfil CSS (2.1, 3, SVG), escolher o meio de exibição e definir o nível de detalhe do relatório. Ao contrário do validador de HTML, aqui os avisos são tão importantes como os erros, porque muitas vezes indicam propriedades que não funcionam em todos os navegadores.

Uma funcionalidade útil é que o validador mostra quais os prefixos de fabricante (-webkit-, -moz-) que já não são necessários. Em 2026, a maioria das propriedades CSS3 é suportada sem prefixos, e o jigsaw ajuda a limpar código desatualizado.

2. Ferramentas online especializadas

Validome.org

O Validome é um validador menos conhecido, mas sólido, com suporte para vários padrões: HTML (incluindo XHTML e HTML5), CSS, feeds RSS/Atom e até microdados. Funciona rapidamente e a interface é minimalista. É conveniente quando precisa de uma verificação cruzada: passe uma página pelo W3C, depois pelo Validome e compare os resultados. Analisadores diferentes por vezes detetam problemas diferentes.

Varvy.com

O Varvy mostra um resumo da página: quantos scripts e estilos estão ligados, o seu tamanho e a ordem de carregamento. Isto não é tanto um validador, mas uma ferramenta de diagnóstico para auditoria de desempenho. É útil quando uma página está lenta: o Varvy mostra imediatamente qual o recurso que está a bloquear a renderização.

3. Extensões de navegador para o Firefox

HTML Validator

Esta extensão baseada no Tidy e no OpenSP mostra um ícone simples na barra de ferramentas: verde significa que a página é válida, vermelho significa que há erros. Ao clicar, abre um relatório detalhado com as linhas problemáticas destacadas e sugestões de correção. É ideal para quem quer ver o estado de validação de cada página que visita sem esforço adicional.

Total Validator

O Total Validator é a ceifeira-debulhadora dos validadores. Numa só passagem, verifica: HTML face a várias versões da norma, CSS, links quebrados, acessibilidade e ortografia. Tem uma função de captura de ecrã para registar páginas em diferentes navegadores, o que é prático para uma comparação visual rápida.

Na prática, o Total Validator é inestimável durante a receção de um site: executa uma verificação em todo o domínio e obtém um único relatório sobre todas as páginas problemáticas.

• Vantagens: tudo numa só ferramenta, capturas de ecrã, verificação de links, atualizada regularmente
• Desvantagens: a interface parece desatualizada, verificar um site grande demora minutos
• Preço: Grátis

Validaty

Uma extensão leve que adiciona um botão à barra de ferramentas do Firefox. Um clique e vê uma indicação cromática da validade da página atual. Minimalista: sem relatórios detalhados, apenas «passa / não passa». Para verificações rápidas durante o fluxo de trabalho, é perfeita.

4. Extensões para Chrome

Web Developer

A extensão Web Developer é o canivete suíço para programadores web. Além da validação (HTML via URL e colagem direta de código, CSS, feeds, acessibilidade), pode: desativar JavaScript, gerir cookies, editar CSS em tempo real, mostrar os textos alternativos das imagens e verificar links quebrados.

A validação aqui não é a funcionalidade principal, mas parte do conjunto de ferramentas. É agradável ter todas as ferramentas reunidas num só painel, para não ter de andar a saltar entre separadores.

• Vantagens: rico conjunto de ferramentas, integração com os validadores do W3C, comunidade ativa
• Desvantagens: usa um validador externo (sem motor próprio), não é possível personalizar para a sua própria instância
• Preço: Grátis

Validity

A extensão Validity envia os resultados da verificação HTML diretamente para a consola JavaScript, para não precisar de abrir um novo separador. Pode configurá-la para usar a sua própria instância de validador e ativar a verificação automática em anfitriões específicos.

• Vantagens: personalização, verificação automática em sites selecionados
• Desvantagens: o resultado mistura-se com os registos de JS, tornando a leitura inconveniente; mostra apenas a linha do erro sem um excerto de código
• Preço: Grátis

HTML Validation Bookmarklet

O Acid.JS Validator é um bookmarklet que usa a API SGML do W3C para verificar a marcação. Não requer a instalação de extensões: basta arrastar o link para a barra de favoritos e executá-lo em qualquer página com um clique. Funciona em qualquer navegador. Uma boa opção de recurso quando as extensões estão bloqueadas pela política corporativa.

5. Ferramentas de programador integradas

O Firebug entrou para a história em 2017, mas o seu legado perdura em todos os navegadores modernos. O Firefox, o Chrome e o Edge têm todos DevTools (F12) integradas que cresceram diretamente do Firebug.

O que as DevTools podem fazer pela validação:

• O separador Consola mostra erros de JavaScript com números de linha e stack traces. Os erros de sintaxe são realçados a vermelho imediatamente quando a página carrega.
• O separador Elementos mostra HTML inválido visualmente: as etiquetas que o navegador «corrigiu» automaticamente são exibidas de forma diferente do código-fonte.
• O separador Problemas (Chrome) / painel Consola (Firefox) mostra avisos sobre APIs obsoletas, conteúdo misto (HTTP/HTTPS) e problemas de CSP.

A principal vantagem das DevTools é a imediatez. Já está no navegador, já está a ver a página, basta premir F12. Não é necessária qualquer instalação.

6. Validadores de JavaScript

Para trabalho sério com JavaScript, um validador online não é suficiente. Na prática, usamos dois níveis de verificação:

Primeiro, o ESLint. Um analisador estático que encontra não só erros de sintaxe, mas também potenciais problemas: variáveis não utilizadas, construções inseguras e desvios ao estilo de código. Integra-se com o VS Code, WebStorm e pipelines de CI/CD. A configuração eslint:recommended cobre a maioria das necessidades de um projeto típico.

Segundo, o TypeScript. A tipagem estrita deteta classes inteiras de erros na fase de escrita do código. Se o projeto estiver em JS puro, adicione pelo menos anotações JSDoc: o TypeScript verifica ficheiros .js com anotações sem ser necessário mudar para .ts.

Os validadores online (javascript-validator.com e semelhantes) são adequados para uma verificação rápida de um pequeno excerto, mas não para um trabalho sistemático com código.

7. Testes de responsividade

O QuirkTools mostra como um site se apresenta em diferentes resoluções de ecrã, desde o smartphone ao monitor panorâmico. É útil para verificações rápidas de layouts responsivos sem ter de alternar fisicamente entre dispositivos.

Em 2026, as DevTools integradas servem como alternativa: o Chrome e o Firefox têm um modo de emulação de dispositivos (Device Toolbar), que renderiza as resoluções móveis com maior precisão. Mas o QuirkTools é conveniente para demonstrar a clientes: uma única captura de ecrã com todos os breakpoints mostra claramente o resultado.

Vídeo: como verificar a validade do HTML em 5 minutos

Se nunca executou um validador W3C, comece por este breve tutorial. O autor demonstra as três formas de verificação: por URL, por carregamento de ficheiro e por colagem direta de código.

⁉️🤔 Perguntas frequentes

Porquê preocupar-se em verificar a validade do HTML em 2026, quando os navegadores corrigem tudo de qualquer forma?

Os navegadores corrigem os erros de forma diferente. O Chrome pode fechar uma tag não fechada de uma maneira, o Safari de outra. O resultado: a página tem um aspeto diferente. Além disso, o HTML inválido prejudica o SEO, porque os robôs de pesquisa são menos tolerantes a erros de marcação do que os navegadores. A validação W3C é um seguro contra bugs entre navegadores e problemas de indexação.

O que é mais importante verificar: o HTML ou o CSS?

O HTML é mais importante. Um erro de HTML quebra a estrutura do documento, fazendo com que os leitores de ecrã e os motores de pesquisa percam conteúdo. Um erro de CSS geralmente afeta apenas o aspeto visual de um elemento específico. Na prática: valide primeiro o HTML (validator.w3.org), depois o CSS (jigsaw.w3.org) e, em seguida, o JS (ESLint ou a consola).

A validação pode ser automatizada no processo de desenvolvimento?

Sim, e esta é a melhor abordagem. O ESLint para JS, o Stylelint para CSS e o html-validate para HTML integram-se em hooks de pre-commit (Husky + lint-staged). Ao fazer push para o repositório, o código é verificado automaticamente e os erros não chegam à produção. Para projetos WordPress, adicione a verificação ao CI via GitHub Actions: execute todos os templates do tema pelo validador em cada PR.

O validator.w3.org mostra dezenas de erros num site funcional. Isto é um desastre?

Nem sempre. Alguns «erros» do validador W3C são atributos não padronizados adicionados por plugins ou frameworks. Por exemplo, atributos do Alpine.js (x-data, x-show) ou atributos de dados de analytics. Analise os erros de forma seletiva: tags não fechadas, aninhamento incorreto e IDs duplicados são bugs reais. Atributos de dados não padronizados são ruído aceitável.

Que validador devo escolher para um site WordPress?

Comece com o validator.w3.org para verificações pontuais de páginas-chave. Instale o Total Validator como extensão do Firefox para auditorias periódicas. Adicione o ESLint e o Stylelint ao seu processo de desenvolvimento de temas. Para links quebrados, use a auditoria integrada do Total Validator ou a ferramenta especializada Dr. Link Check.

Resumo: o que executar e quando

A validação de código não é uma ação única antes da entrega do projeto, mas um hábito. Aqui está a nossa lista de verificação de trabalho:

• Ao construir um novo bloco: execute o HTML no validator.w3.org (colagem direta de código) e o CSS no jigsaw.w3.org.
• Ao instalar um novo plugin no WordPress: abra a página com o plugin no navegador, prima F12 → Consola, verifique se há erros de JS a vermelho.
• Trimestralmente: execute o Total Validator em todo o site, verifique links quebrados e o panorama geral.
• Antes do lançamento: DevTools → Device Toolbar → percorra todos os breakpoints à procura de bugs visuais.

Não precisa de verificar todas as páginas todos os dias. Basta integrar a validação nos pontos críticos do fluxo de trabalho e o número de bugs «inesperados» em produção diminuirá drasticamente.

Se está a começar, instale a extensão HTML Validator para Firefox ou Web Developer para Chrome. O ícone na barra de ferramentas irá lembrá-lo de verificar sempre que abrir o site. Esta é a forma mais simples de tornar a validação um hábito.