Formatador de HTML
Formate, indente e minifique HTML diretamente no seu navegador. Cole ou envie o marcado, escolha seu estilo de indentação e obtenha HTML limpo e legível ou uma versão minificada compacta instantaneamente.
100% Processamento no Lado do Cliente
Seu HTML é analisado e formatado totalmente no seu navegador. Nada é enviado para um servidor.
Formate o HTML com indentação consistente para que as tags aninhadas sejam fáceis de ler e depurar.
Pré-visualização ao vivo
A pré-visualização é renderizada em um quadro isolado com scripts desativados, então tags <script> coladas são exibidas mas nunca executadas.
Índice
O que é um formatador de HTML?
Um formatador de HTML reorganiza o marcado HTML, seja para legibilidade ou para tamanho. No modo Formatar, ele reaplica a indentação das tags aninhadas para que a estrutura do documento seja fácil de examinar e depurar. No modo Minificar, ele remove comentários e espaços em branco desnecessários para que o mesmo marcado ocupe menos bytes.
Esta ferramenta analisa seu HTML usando o próprio analisador embutido do navegador — o mesmo mecanismo que renderiza páginas web — então trata marcado real e imperfeito (tags não fechadas, maiúsculas e minúsculas misturadas, aspas ausentes) da mesma forma que um navegador faria, e depois o reescreve de forma limpa.
Como funciona
- Adicione seu HTML: cole o HTML diretamente no editor ou envie um arquivo .html.
- Escolha um modo: alterne entre Formatar para embelezar com indentação, ou Minificar para comprimir para produção.
- Ajuste as opções: escolha um tamanho de indentação (2, 4, 8 espaços ou uma tabulação) no modo Formatar, ou decida se deseja remover comentários no modo Minificar.
- Copie ou baixe: copie o resultado para a área de transferência ou baixe-o como um arquivo .html.
Recursos
- Cole HTML ou envie um arquivo .html
- Modo de embelezamento com indentação de 2, 4, 8 espaços ou tabulação
- Modo de minificação que remove espaços em branco e quebras de linha
- Remoção opcional de comentários no modo Minificar
- Preserva exatamente o conteúdo de <pre>, <script>, <style> e <textarea>
- Mantém elementos em linha como <a>, <strong> e <em> fluindo naturalmente com o texto ao redor
- Pré-visualização isolada ao vivo para confirmar que nada mudou visualmente
- Estatísticas de tamanho de saída, número de linhas e percentual de redução
- Copiar para a área de transferência ou baixar como .html
- Processamento 100% no navegador para sua privacidade
Boas práticas
- Formate antes da revisão de código: uma indentação consistente facilita muito que colegas de equipe identifiquem problemas estruturais em um diff.
- Minifique apenas o resultado final: mantenha um arquivo fonte legível e formatado, e minifique como uma etapa de build, não como o arquivo que você edita no dia a dia.
- Verifique a pré-visualização após minificar: confirme que a página renderizada ainda parece idêntica, especialmente em torno de texto em linha sensível a espaços.
- Remova comentários somente após terminar a depuração: comentários costumam trazer contexto para a próxima pessoa que mexer no arquivo, então mantenha-os no código-fonte e remova-os apenas na versão minificada.
- Combine com a largura de indentação da sua equipe: ajuste o tamanho da indentação para corresponder à configuração do editor do seu projeto (por exemplo, .editorconfig) para que a saída formatada não gere diffs ruidosos.
Solução de problemas
O resultado formatado parece diferente do que colei
O analisador de HTML do navegador corrige automaticamente problemas estruturais como tags não fechadas ou aspas ausentes, então o resultado reflete a estrutura corrigida — assim como um navegador real renderizaria seu marcado original.
A ordem ou as aspas dos atributos mudaram
Os atributos são serializados novamente na ordem em que foram analisados, e atributos booleanos como disabled são escritos sem valor. Isso não afeta a renderização, mas pode alterar um diff de texto.
O texto dentro de <pre> ou <script> parece intocado
Isso é intencional — o conteúdo dentro de <pre>, <script>, <style> e <textarea> é preservado exatamente como está, já que espaços em branco e quebras de linha costumam ser significativos ali.
A saída minificada ainda contém alguns espaços
Um único espaço é mantido entre palavras dentro de uma linha de texto para que elas não se juntem; apenas espaços redundantes entre tags e espaços repetidos são removidos.
Casos de uso comuns
- Limpar HTML extraído ou exportado: reformate marcado obtido de uma exportação de CMS, modelo de e-mail ou web scraper para que fique legível novamente.
- Revisão de código e depuração: formate HTML minificado ou comprimido de produção para rastrear um problema de layout ou marcado.
- Reduzir o peso da página: minifique modelos HTML estáticos ou marcado de e-mail antes de implantar para reduzir o tamanho de transferência.
- Padronizar uma base de código: reformate arquivos HTML com um estilo de indentação consistente antes de enviá-los a um repositório compartilhado.
- Preparar trechos de HTML para documentação: formate exemplos de HTML incorporados para que sejam fáceis de ler em um tutorial ou README.
Perguntas frequentes
Não. A pré-visualização é renderizada dentro de um iframe isolado com scripts desativados, então tags <script> coladas são exibidas mas nunca executadas.
Não. Ambos os modos alteram apenas espaços em branco, indentação e a serialização de atributos — a estrutura real do marcado e a saída visível permanecem as mesmas.
Ele usa o analisador embutido do navegador, que corrige automaticamente problemas comuns como tags não fechadas, então o resultado é sempre válido — mas não sinaliza nem explica o que foi corrigido.
Ele é preservado exatamente como está tanto no modo Formatar quanto no modo Minificar, já que espaços em branco dentro desses elementos costumam ser significativos.
Sim. No modo Formatar, escolha 2, 4 ou 8 espaços, ou um caractere de tabulação.
Somente se você ativar a opção "Remover comentários HTML" — por padrão, os comentários são mantidos.
Não. Tudo acontece localmente no seu navegador, e nada é enviado ou salvo.