# Linter de HTML para Email Verifica a compatibilidade entre clientes de templates HTML de email: flex/grid não suportado, CSS não inline, armadilhas de renderização Word do Outlook, problemas de layout com tabelas e falta de acessibilidade. Cobre limitações de Gmail/Outlook/Apple Mail. > Página canônica: https://elysiatools.com/pt/tools/email-html-linter - **Categoria:** Development - **Palavras-chave:** html email, email html, linter email, compatível outlook, renderização gmail, css inline, vml, layout tabela, newsletter, template email ## Visão geral Pega os bugs de HTML-email que só aparecem no Outlook, Gmail e Apple Mail — antes de enviar. \*\*Por que HTML de email é diferente.\*\* Email é em grande parte HTML dos anos 90 renderizado por engines inconsistentes: Outlook usa \*\*Microsoft Word\*\*, Gmail remove a maioria dos \`\`, Apple Mail é o mais tolerante. Flexbox, grid e position:fixed quebram na maioria dos clientes. \*\*O que verifica.\*\* CSS não suportado, CSS não inline, armadilhas do Outlook (VML), layout com tabelas (role/cellpadding), imagens (alt/width), acessibilidade (lang, contraste, formulários/script). \*\*Níveis.\*\* 🔴 Error, 🟡 Warning, 🔵 Info. Strict mostra info; Lenient só erros e warnings principais. \*\*Limitações.\*\* É um verificador de regras estático — não pode rodar o email em clientes reais. ## Entradas - **HTML do email** (textarea): Hello... - **Rigor** (select) ## Quando usar - Antes de disparar campanhas de email marketing para garantir que o layout não quebre no Outlook ou Gmail. - Ao converter designs modernos em estruturas de tabelas compatíveis com clientes de email legados. - Durante a homologação de templates de newsletter para verificar se todos os estilos CSS foram devidamente aplicados de forma inline. ## Como funciona - Insira o código HTML do seu template de email no campo de texto principal. - Selecione o nível de rigor desejado para a validação: Rigoroso, Equilibrado ou Brando. - O linter analisa o código estaticamente em busca de tags, atributos e propriedades CSS incompatíveis com os principais clientes de email. - Visualize o relatório detalhado com erros, avisos e informações de acessibilidade para corrigir o código. ## Casos de uso - Validação de templates de email marketing criados manualmente para evitar quebras de layout no Outlook. - Verificação de acessibilidade em newsletters corporativas, garantindo tags alt em imagens e definição de idioma. - Auditoria de CSS para garantir que estilos importantes não sejam removidos pelo Gmail em dispositivos móveis. ## Perguntas frequentes ### Por que o flexbox e o grid são apontados como erros? A maioria dos clientes de email, especialmente o Outlook para desktop, não suporta layouts modernos como flexbox e grid, exigindo o uso de tabelas para estruturação. ### O que significa o aviso de CSS não inline? Clientes como o Gmail para dispositivos móveis costumam remover blocos do cabeçalho, tornando necessário aplicar estilos diretamente nos elementos (inline). ### O que é o atributo role="presentation" nas tabelas? Ele indica aos leitores de tela que a tabela é usada apenas para fins de layout e não para dados tabulares, melhorando a acessibilidade do email. ### Este linter renderiza o email em dispositivos reais? Não, ele realiza uma análise estática de regras de compatibilidade. Para testes visuais em tempo real, utilize serviços como Litmus ou Email on Acid. ### Qual a diferença entre os níveis de rigor? O modo Rigoroso exibe todas as recomendações (incluindo acessibilidade), o Equilibrado foca em problemas comuns de renderização, e o Brando exibe apenas erros críticos. ## Ferramentas relacionadas - [Construtor de art direction responsiva Picture / srcset](https://elysiatools.com/pt/tools/responsive-picture-srcset-art-direction-builder): Gera marcação completa com recortes de art direction: elementos por breakpoint, candidatas 1x/2x ou descritores de largura por modelo {w}, camadas AVIF/WebP opcionais, tratamento de sizes, width/height anti-CLS e sabores HTML e JSX com notas de lint baseadas na especificação. - [Verificador de acessibilidade](https://elysiatools.com/pt/tools/accessibility-checker): Detecta problemas comuns de WCAG 2.1 em HTML, paginas ou imagens de design e retorna orientacoes praticas - [Gerador de Data URI](https://elysiatools.com/pt/tools/data-uri-generator): Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown - [Gerador de relatorio de auditoria de acessibilidade](https://elysiatools.com/pt/tools/accessibility-audit-report-generator): Audita HTML ou URL em busca de problemas comuns de WCAG e exporta um PDF estruturado - [Linter de Dockerfile (regras Hadolint)](https://elysiatools.com/pt/tools/dockerfile-linter): Cole um Dockerfile e receba análise estática estilo Hadolint sem daemon Docker: tags da imagem base, USER root, sudo, higiene de apt/apk/yum/dnf, fixação de versões npm/pip/yarn, ADD vs COPY, fusão de camadas, pipefail, portas EXPOSE, segredos em ENV — 30+ regras por severidade com linha, motivo e exemplo de correção, mais o código anotado linha a linha. - [Gerador de sprite sheet SVG](https://elysiatools.com/pt/tools/svg-sprite-generator): Envie até 30 ícones SVG e mescle-os em um único sprite sheet: modo para embutido, modo para fragmentos de arquivo externo. Normaliza o viewBox (derivado de width/height), deduplica ícones, opcionalmente remove fill/stroke para currentColor, sempre limpa e atributos on\*, e gera snippets HTML / React / Vue / CSS com pré-visualização ao vivo de cada ícone. - [Extrator de imagens e captions PDF](https://elysiatools.com/pt/tools/pdf-image-caption-extractor): Extrai imagens PDF, relaciona captions proximas e gera um indice HTML navegavel - [Extrator de paleta de cores da imagem](https://elysiatools.com/pt/tools/image-color-palette-extractor): Envia uma imagem, extrai cores dominantes e exporta tokens prontos para codigo com checagem de contraste ## Exemplos - [Amostras de HTML com Imagens](https://elysiatools.com/pt/samples/html-with-images): Amostras de código fonte HTML com imagens para testar extração - [Amostras HTML](https://elysiatools.com/pt/samples/html-viewer-samples): Arquivos de amostra para o visualizador HTML no navegador - [Exemplos PDF](https://elysiatools.com/pt/samples/pdf-samples): Exemplos PDF gerados por ferramentas de 2026-02-01 a 2026-02-10 - [Exemplos de Comunicação em Tempo Real WebRTC](https://elysiatools.com/pt/samples/webrtc-samples): Exemplos completos WebRTC para comunicação áudio/vídeo P2P, canais de dados, compartilhamento de tela e servidor de sinalização ## Conteúdo relacionado - [Ferramentas para minificar e formatar código](https://elysiatools.com/pt/hubs/code-minify-beautify-format-tools): Prepare código e marcação para revisão ou entrega com formato legível, saída compacta e verificações de preservação.