Formatador HTML
Formate ou minifique HTML com indentação, quebra de atributos e self-closing configuráveis.
HTML Beautifier / Minifier
Runs entirely in your browser. Your input never leaves your device.
What next?
How it works
Por que formatar HTML tem valor
O HTML bruto vindo de geradores de código, exportações de CMS ou ferramentas de build costuma chegar como uma única linha ou com indentação inconsistente. Embora os navegadores façam o parse de forma idêntica independentemente do espaço em branco, os humanos não o leem da mesma forma. HTML legível é mais fácil de comparar no controle de versão, mais fácil de depurar nas DevTools do navegador, e muito menos provável de esconder erros estruturais como tags não fechadas ou atributos mal posicionados.
A minificação vai na direção oposta: remove todo o espaço em branco desnecessário para reduzir o tamanho do arquivo. Para HTML servido por HTTP, a compressão HTTP (gzip ou brotli) é mais eficaz do que a remoção simples de espaço em branco.
Particularidades do parse HTML
HTML tem características que tornam a formatação mais difícil do que JSON ou YAML:
Void elements — elementos como <br>, <hr>, <img>, <input>, <meta> e <link> não podem ter filhos e nunca têm tag de fechamento. Um formatador precisa conhecer essa lista para evitar inserir quebras de linha espúrias. O js-beautify trata corretamente o conjunto de void elements do HTML5.
Tags de fechamento opcionais — <li>, <td>, <tr>, <p> e outros elementos têm tags de fechamento que a especificação HTML5 torna opcionais. Navegadores as fecham automaticamente; um formatador ingênuo pode interpretar mal o aninhamento.
Seções CDATA em SVG/MathML — SVG inline pode conter blocos <![CDATA[...]]>. Um formatador deve tratá-los como texto opaco, não tentar re-indentar.
Comentários — <!-- ... --> e comentários condicionais do IE (<!--[if lt IE 9]>) devem sobreviver tanto ao processo de embelezamento quanto ao de minificação.
Opções de indentação
A ferramenta suporta indentação de 2 espaços, 4 espaços e tabs. A escolha depende do .editorconfig do seu projeto ou convenção da equipe. Dois espaços domina nos projetos JavaScript de frontend moderno e coincide com o padrão do Prettier para HTML. Quatro espaços é mais comum em projetos legados e alguns templates de Django/Jinja.
A exceção do <pre> e <textarea>
O espaço em branco dentro de <pre>, <textarea> e <script type="text/plain"> é semanticamente significativo. Um bloco <pre> renderiza cada espaço, tab e quebra de linha exatamente como está escrito. Um formatador não deve re-indentar o conteúdo dentro desses elementos.
O js-beautify preserva o espaço em branco dentro de <pre> e <textarea> por padrão. Ferramentas que não fazem isso podem corromper visualmente blocos de código <pre> e alterar os valores padrão de <textarea>.
Quando embelezar vs minificar
Embeleze quando:
- Trabalha em desenvolvimento e depuração.
- Faz revisão de código e pull requests — HTML indentado é muito mais fácil de revisar.
- Aprende a partir de HTML de terceiros: cole, indente, leia.
Minifique quando:
- Serve assets de produção diretamente.
- Tem HTML inline em strings JavaScript inseridas via
innerHTML. - Trabalha com HTML para e-mail: muitos clientes de e-mail desabilitam CSS externo.
Em aplicações web modernas, Vite, webpack e Next.js minificam HTML em builds de produção. Use esta ferramenta para limpezas pontuais, templates únicos ou quando não tem um bundler disponível.
Usando js-beautify para HTML
import beautify from 'js-beautify';
const pretty = beautify.html(rawHtml, {
indent_size: 2,
indent_char: ' ',
max_preserve_newlines: 1,
indent_inner_html: true,
wrap_line_length: 0,
unformatted: ['pre', 'textarea'],
extra_liners: ['head', 'body', '/html'],
});
Opções principais:
unformatted— lista de tags cujo conteúdo não deve ser re-indentado.indent_inner_html— se deve indentar o conteúdo de<head>e<body>.wrap_line_length— comprimento máximo de linha antes de quebrar listas de atributos longas.
Para minificação em produção, use html-minifier-terser:
import { minify } from 'html-minifier-terser';
const small = await minify(rawHtml, {
collapseWhitespace: true,
removeComments: true,
minifyCSS: true,
minifyJS: true,
});
Alternativas no ecossistema
- Prettier — o formatador padrão para a maioria dos projetos frontend. Formata HTML, CSS, JS e TypeScript com estilo uniforme.
- html-minifier-terser — minificação mais agressiva: remove atributos redundantes, colapsa atributos booleanos.
Para formatação rápida sem instalar nada, esta ferramenta entrega o resultado diretamente no navegador.
Privacidade
Todo o processamento HTML é executado no seu navegador. Seu markup nunca é enviado a um servidor.
FAQ
Embelezar HTML muda como minha página é renderizada?
Na quase totalidade dos casos, não. Os navegadores normalizam o espaço em branco no HTML: múltiplos espaços, tabs e quebras de linha no conteúdo de texto colapsam para um único espaço. Indentar o markup muda o espaço em branco entre as tags, não no conteúdo de texto visível. A única exceção é o conteúdo dentro de <pre>, <textarea> ou elementos com estilo white-space: pre — esta ferramenta preserva o espaço em branco dentro desses elementos exatamente como está.
A minificação quebra JavaScript ou CSS inline?
Não, com as opções corretas. O modo minify do js-beautify remove apenas o espaço em branco entre tags — não reescreve o conteúdo de blocos <script> ou <style>. Para minificação mais agressiva que também minifique JS e CSS inline, use html-minifier-terser com minifyJS: true e minifyCSS: true. Esta ferramenta é para limpeza rápida; para pipelines de produção, integre html-minifier-terser no seu processo de build.
O que são void elements e por que importam?
Void elements são tags HTML que não podem ter filhos: <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <col>, <embed>, <param>, <source>, <track> e <wbr>. Não têm tag de fechamento. Um formatador que não conhece essa lista pode tentar indentar filhos que não existem. O parser ciente do HTML5 no js-beautify trata void elements corretamente.
Devo usar indentação de 2 ou 4 espaços?
Siga a convenção existente do seu projeto. Dois espaços é o padrão dominante em projetos JavaScript de frontend moderno e coincide com o padrão do Prettier. Quatro espaços é mais comum em codebases legados, templates de Python/Django e alguns guias de estilo corporativos. Se estiver começando do zero, dois espaços evita que HTML profundamente aninhado se desloque muito para a direita.
Por que alguns atributos aparecem em linhas separadas?
A configuração de comprimento máximo de linha controla isso. Quando uma tag de abertura com muitos atributos supera o comprimento de linha configurado, o js-beautify quebra os atributos em linhas individuais para maior legibilidade. Defina o comprimento como 0 para desabilitar completamente a quebra e manter todos os atributos inline, ou defina um valor como 120 para permitir tags longas em uma linha antes de quebrar.
Como se compara ao Prettier para formatação HTML?
Prettier é o padrão da indústria para formatação automática e consistente em todo um projeto — instale uma vez e todos os desenvolvedores obtêm o mesmo resultado. Esta ferramenta é para formatação pontual sem instalação ou configuração. Use Prettier em CI e hooks pré-commit; use esta ferramenta para limpezas rápidas, colar fragmentos ou explorar a formatação de HTML copiado de outro lugar.
Posso formatar HTML embutido em template literals do JavaScript?
Não diretamente — esta ferramenta formata apenas HTML independente. Para HTML dentro de arquivos JS/TS (tagged template literals, JSX), o Prettier trata esse contexto automaticamente. Alternativamente, extraia a string HTML, formate aqui e cole de volta.
É seguro colar HTML sensível aqui (dashboards internos, e-mails)?
Todo o processamento é executado localmente no seu navegador via js-beautify compilado para JavaScript. Nenhum conteúdo é enviado a nenhum servidor. Você pode verificar abrindo a aba de rede do navegador — nenhuma requisição é feita quando você cola e formata.