Formatar ou minificar HTML
Formatador e minificador HTML online gratuito — cole um bundle minificado e leia-o indentado, ou tire bytes de um template de email antes de implantar. O modo de detecção automática escolhe a direção certa (entrada compacta de uma linha → saída indentada, entrada indentada → saída de uma linha), ou escolha manualmente. Indente com 2 espaços, 4 espaços ou tabs. Elementos void (br, hr, img, input, meta, link) podem ser auto-fechados estilo XHTML ou deixados nus estilo HTML5. O conteúdo de <pre>, <script> e <style> é preservado literalmente — formatadores que bagunçam esses blocos quebram exemplos de código com syntax-highlight em todo blog. Comentários podem ser opcionalmente removidos em ambas as direções.
Como usar
A direção é auto-detectada por padrão.
2 espaços é o padrão para a maioria dos guias de estilo frontend.
Versão embelezada ou minificada aparece à direita.
Clipboard em um clique ou salve como .html.
Embeleze ou minifique HTML no navegador — preserva conteúdo de <pre>, <script>, <style> literalmente
Recursos
Usos típicos
- Embeleze um arquivo HTML minificado copiado-colado para inspecionar sua estrutura.
- Minifique um template HTML de email antes de implantar — economiza bytes em cada envio.
- Converta elementos void HTML5 para auto-fechamento XHTML para um pipeline XML estrito.
- Remova comentários de desenvolvedor de um build HTML de produção.
- Re-indente um template editado manualmente para corresponder às convenções da equipe.
Por que este
Muitos formatadores baseados em navegador bagunçam o conteúdo de <pre> ou <script> — passe um snippet de código por um deles e sua indentação fica destruída. Este reconhece elementos de texto bruto (script, style, pre, textarea) e deixa o conteúdo deles em paz byte por byte. Tudo o mais recebe indentação limpa por bloco. Sem cadastro, sem cota por arquivo.
Perguntas frequentes
O que é um "elemento void"?
Um elemento HTML que não tem tag de fechamento nem conteúdo — br, hr, img, input, meta, link, source, track, area, base, col, embed, param, wbr. Em HTML5 estes podem ser escritos como <br> (preferido) ou <br /> (XHTML legado). Escolha o que seu linter espera.
Modifica o conteúdo dentro de <script> ou <style>?
Não. Qualquer coisa dentro de <script>, <style>, <pre> e <textarea> é preservada byte por byte. O tratamento de espaço em branco ao redor dessas tags segue as regras de elementos de texto bruto HTML5.
Por que minha saída minificada ainda tem espaços?
A minificação colapsa o espaço entre tags mas preserva pelo menos um espaço onde é semanticamente significativo (entre elementos inline como <span> ou <a>) — remover esses espaços muda visivelmente a página renderizada. Para remoção agressiva de espaço em branco use um minificador em tempo de build (html-minifier-terser, htmlnano) onde você pode ajustar o trade-off.
Isso vai consertar tags não fechadas?
Não — a ferramenta é puramente um formatador. Se você tem <div>s não fechadas, a saída refletirá a estrutura (quebrada). Use um validador como o W3C Nu Validator para lint estrutural.
Lida com sintaxe de templating como @{{ ... }} ou {% %}?
Tenta deixar a maioria dos tokens de templating intactos, mas Blade ({{ }}), Twig ({% %}), Vue ({{ }}), etc. ainda podem ficar com espaçamento estranho. Para templates com interpolação pesada, formate o HTML renderizado ou use uma ferramenta consciente de templating.
Mobile?
Sim — entrada e saída empilham em telas estreitas.
Podemos — e é grátis! Envie uma mensagem rápida com sua ideia. Se quiser discutir em detalhes, deixe seu email e entraremos em contato. Pode ser anônimo.
