Cole o HTML e veja-o renderizado em tempo real em qualquer largura de tela - depois organize-o, reduza-o ou verifique se há problemas.
Largura
HTML
Pré-visualização
Pressione Inspecionar para contagem de elementos, estrutura de títulos e uma lista de problemas na marcação.
Problemas
Estrutura de títulos
Tags mais usadas
A saída do console da visualização aparece aqui quando os scripts têm permissão para ser executados.
Sobre Visualizador de HTML
Um modelo de e-mail, um trecho de um chamado, um relatório exportado: às vezes você só precisa ver como um pedaço de HTML fica. Cole e ele é renderizado enquanto você digita, dentro de um quadro isolado, na largura de tela que escolher. Ao lado da prévia você pode organizá-lo, reduzi-lo, executar seus scripts com um console e ver uma lista do que realmente está errado na marcação.
O que faz
Prévia em tempo real enquanto você digita; acima de 200.000 caracteres ela pausa até você clicar em Atualizar.
Tamanhos de prévia de celular, tablet, desktop e largura total, além de tela cheia.
Os scripts ficam desligados por padrão; ligue-os e veja a saída do console e os erros.
Formate marcação bagunçada ou minifique, sem mexer no conteúdo de pre, script ou style.
Um relatório de inspeção: contagem de elementos, a estrutura de títulos e problemas concretos.
Abra um arquivo .html local, copie o resultado ou baixe-o.
Como funciona
1Cole HTML, abra um arquivo .html ou carregue o exemplo.
2Escolha uma largura de prévia e decida se os scripts podem rodar.
3Formate, minifique ou inspecione, depois copie ou baixe o resultado.
Por que a prévia fica isolada
O HTML colado pode conter scripts, formulários e links que você não escreveu. A prévia roda num iframe sandbox com origem opaca própria, então nada dentro dela consegue ler os cookies deste site ou sua sessão, enviar dados em seu nome ou tirar esta página do lugar. Os scripts continuam desligados até você ligá-los.
O que a inspeção verifica
Ela lê a marcação com um analisador HTML padrão e informa só o que viu: tags abertas e nunca fechadas, tags de fechamento sem abertura, imagens sem texto alternativo, ids duplicados, links que abrem nova aba sem rel="noopener", níveis de título pulados, recursos carregados por http:// e, numa página completa, falta de doctype, title, lang ou tag viewport.
O que a inspeção deixa passar de propósito
Ela aponta erros, não estilo. Tags de fechamento que o padrão HTML permite omitir, como </p>, </li>, </td>, </tr> e </option>, nunca aparecem como não fechadas, e elementos vazios como <br>, <img> e <input> não precisam de fechamento. Um alt="" vazio conta como texto alternativo, o que é correto para uma imagem decorativa. Um link com target="_blank" passa com rel="noopener" ou rel="noreferrer". Um link http:// comum em <a href> não conta como inseguro; só os recursos carregados, como imagens, scripts, folhas de estilo e iframes. Voltar a subir nos níveis de título (de h4 para h2) não tem problema; só é apontado um salto para baixo que pula um nível (de h2 para h4). As verificações de doctype, title, lang e viewport só rodam quando o que foi colado é uma página inteira, ou seja, tem doctype ou uma tag html, head ou body, então um bloco de e-mail ou um trecho de CMS não é penalizado por elas.
Como revisar um e-mail HTML antes de enviar
Veja primeiro na largura Celular (375 px), porque muita gente abre e-mail no celular, depois em Tablet (768 px) e Desktop (1280 px). Deixe os scripts desligados: os aplicativos de e-mail não executam JavaScript, então a prévia sem scripts fica mais perto do que o leitor vê. Use URLs de imagem absolutas com https://, porque nem a prévia nem o aplicativo de e-mail do destinatário enxergam arquivos do seu computador. Minificar remove comentários comuns, mas mantém os comentários condicionais que começam com <!--[if, como <!--[if mso]> ... <![endif]-->. Ele não mantém o fechamento <!--<![endif]--> do padrão <!--[if !mso]><!-->, então não minifique um modelo que o use, ou o Outlook pode esconder tudo o que vem depois. A prévia é a renderização de um navegador; o Outlook clássico para Windows desenha o e-mail com o motor do Word, então mande um teste para lá antes de um disparo grande.
Perguntas
Meu HTML é enviado ou armazenado?
A prévia, a formatação e a minificação acontecem no seu navegador. Só o relatório de inspeção envia a marcação ao servidor, onde ela é analisada e devolvida na mesma resposta: nada é gravado em disco nem registrado, e os registros de uso guardam apenas contagens.
Por que meus scripts não rodam?
Os scripts ficam desligados por padrão porque código colado não é confiável. Marque "Executar scripts" e a prévia recarrega com JavaScript ativado, ainda dentro do sandbox, e a saída do console aparece abaixo da prévia.
Por que imagens ou folhas de estilo relativas não carregam?
A prévia é montada a partir do texto colado, não do seu computador nem do seu servidor, então um caminho relativo como images/logo.png é procurado neste site e não é encontrado. Use URLs absolutas ou adicione uma tag <base href="..."> que aponte para onde os arquivos realmente estão.
Formatar muda a aparência da página?
Só reindenta entre as tags e não mexe no conteúdo de pre, textarea, script e style. O espaço entre elementos inline pode às vezes mudar um pouco, então confira a prévia depois de formatar.
Qual o tamanho máximo de documento?
O relatório de inspeção aceita até 1.000.000 de caracteres e lista no máximo 200 problemas. A prévia em tempo real pausa acima de 200.000 caracteres para a digitação continuar fluida; clique em Atualizar ou pressione Ctrl+Enter para atualizá-la.
Posso pré-visualizar um modelo de e-mail HTML?
Sim. Cole o HTML do e-mail ou abra o arquivo .html, mude a largura para Celular (375 px) e Desktop (1280 px) para ver os dois layouts e clique em Inspecionar para achar imagens sem texto alternativo e recursos carregados por http:// sem criptografia. A pré-visualização usa o motor do seu navegador, enquanto cada cliente de e-mail usa o próprio e muitos descartam parte do CSS, então ela mostra aproximadamente o que um webmail no navegador mostra, não exatamente o que cada caixa de entrada vai mostrar. Clientes de e-mail não executam JavaScript, então deixe Executar scripts desligado. Antes do envio real, mande um teste para os clientes que seus leitores usam.
É seguro abrir um arquivo HTML que me enviaram?
Mais seguro do que abri-lo diretamente. Abrir arquivo carrega o arquivo no editor dentro do seu navegador, e nada vai para o servidor a menos que você toque em Inspecionar. A prévia é um quadro isolado com scripts e envio de formulários desligados, então a página não pode executar código, enviar um formulário nem acessar os cookies deste site. Imagens e folhas de estilo com endereço http(s) completo ainda carregam, então o remetente pode saber que o arquivo foi aberto. Leia o código primeiro, deixe Executar scripts desligado e nunca digite uma senha numa página que recebeu.
Por que letras acentuadas viram � quando abro um arquivo?
Abrir arquivo sempre lê o arquivo como UTF-8 e ignora a tag <meta charset> que ele tiver. Uma página salva em Windows-1252 ou ISO-8859-1, comum em editores e exportações antigas do Windows, grava letras como á, ç e ã com bytes que não são UTF-8 válido, então cada uma aparece como o caractere de substituição �. Abra o arquivo no seu editor, salve de novo como UTF-8 (Bloco de Notas: Salvar como, Codificação UTF-8; VS Code: clique na codificação na barra de status e depois em Salvar com Codificação) e abra aqui outra vez. Ou abra o arquivo no navegador, veja o código-fonte e cole aqui, pois o navegador já o decodificou com o charset da própria página.
Por que um formulário ou um link que abre uma nova aba não faz nada na prévia?
A sandbox nunca permite envio de formulários nem pop-ups, mesmo com Executar scripts ligado, então clicar em Enviar não envia nada e links com target="_blank" ou chamadas window.open() são bloqueados. Isso impede que uma página colada envie dados ou abra outros sites. Links comuns abrem dentro do quadro da prévia, e sites que não aceitam ser exibidos em quadro aparecem vazios ou recusados. Para conferir um formulário, leia action, method e campos no código; Inspecionar também lista cada link target="_blank" sem rel="noopener". Teste o envio real no seu próprio servidor de desenvolvimento.