Formatador HTML

HTML minificado que chega como uma única linha de 40.000 caracteres é ilegível, e HTML indentado à mão e editado seis vezes não fica muito atrás. A ferramenta acima funciona nas duas direções: reindenta o markup para você conseguir ler ou o enxuga ao máximo para você conseguir publicar.

Como funciona

Cole o seu markup, escolha formatar ou minificar e defina uma indentação de 2 ou 4 espaços. Tudo roda no navegador — nada é enviado para servidor algum, o que faz diferença quando a página que você está depurando contém tokens de sessão ou dados de clientes.

Formatar divide a entrada em tokens e a reescreve com um nó por linha, aumentando a indentação depois de uma tag de abertura e diminuindo antes de uma de fechamento. Três detalhes tornam a saída correta, e não apenas arrumada:

• Elementos void — <br>, <img>, <input>, <meta>, <link> e os demais elementos void do HTML5 — nunca abrem um nível, então o conteúdo seguinte não fica indentado por engano embaixo deles.
• Elementos de texto bruto — <script>, <style> e <textarea> — têm o conteúdo percorrido até a tag de fechamento literal, exatamente como especifica o modelo de conteúdo do HTML5. Assim, um < dentro de uma string JavaScript ou de um seletor CSS não é confundido com o início de uma tag.
• Comentários e o doctype passam sem nenhuma alteração.

Minificar condensa sequências de espaços em branco e junta tudo em uma única linha. Espaço em branco que contém uma quebra de linha é tratado como formatação e descartado; um simples espaço inline — aquele entre dois elementos <span> adjacentes na mesma linha — é mantido como um único espaço, porque removê-lo grudaria visualmente as duas palavras.

O que ela deliberadamente não faz

Isto é um formatador, não um validador nem um sanitizador. Ele reindenta sem reclamar um markup com uma <div> não fechada, e a saída vai denunciar o aninhamento errado com uma indentação que nunca volta para a margem esquerda — muitas vezes é o jeito mais rápido de encontrar a tag não fechada, mas não é uma mensagem de erro. Para verificar a conformidade, passe o markup pelo validador do W3C.

Ele também não minifica o conteúdo de <script> e <style>. Esse conteúdo é preservado literalmente, porque comprimir JavaScript com segurança exige fazer o parse do JavaScript, e uma regex que tente fazer isso mesmo assim vai acabar quebrando em algum template literal. Para isso, use um bundler de verdade.

A ordem dos atributos, o estilo de aspas e o uso de maiúsculas e minúsculas ficam exatamente como você escreveu. A ferramenta muda os espaços em branco e nada mais, então um arquivo formatado e a sua versão minificada sempre representam o mesmo documento.

Quando usar cada modo

Formatar é para leitura: inspecionar o código-fonte de uma página, revisar o diff de um template ou descobrir por que um fragmento renderizado no servidor está aninhado de um jeito diferente do que o template sugere. A indentação deixa visíveis erros de estrutura que um paredão de texto esconde.

Minificar é para transporte, e o ganho é menor do que costumava ser. Em HTTP com gzip ou Brotli, remover espaços em branco do HTML costuma economizar só alguns por cento, porque a compressão já lida bem com espaços repetidos. Ainda assim, ajuda em conteúdo que precisa caber em um orçamento fixo — um template de e-mail, um bloco de CSS crítico inline, um atributo data contendo um fragmento.

Não minifique o que uma etapa de build já vai minificar por você, e nunca faça commit de HTML minificado como código-fonte; a versão legível é a que pessoas precisam manter.

Leituras e ferramentas relacionadas

Se você está formatando markup para entendê-lo, vale a pena conhecer as regras de estrutura diretamente: o essencial do HTML5 cobre as categorias de elementos, quais elementos podem conter quais e por que as distinções entre elementos void e de texto bruto citadas acima existem. Quando o markup é gerado por uma camada de view em vez de escrito à mão, Spring MVC mostra onde o template entra no fluxo da requisição.

Para a operação equivalente sobre dados em vez de markup, use o formatador de JSON ou o formatador de YAML.