Como formatar ou compactar HTML

Uma caixa, dois botões. Formatar HTML reescreve a marcação com uma tag por linha e os elementos aninhados recuados, na largura escolhida ao lado dos botões: tabulação, 2, 4 (padrão) ou 8 espaços. Compactar HTML devolve a mesma marcação com os espaços comprimidos.

Os dois botões trabalham apenas com o texto da caixa: ao clicar, nenhuma requisição saiu do navegador. Um documento de 716 KB leva cerca de 2,4 segundos para formatar e 2,1 para compactar, e a marcação já escrita sem espaços redundantes volta do mesmo tamanho, porque o minificador remove apenas espaços.

Cole a marcação na caixa e ajuste a largura do recuo se os 4 espaços padrão não servirem.
Clique em Formatar HTML. Cada tag fica na própria linha, os elementos filhos ganham um nível de recuo e as sequências de espaços, tabulações e quebras de linha do texto viram um único espaço.
Clique em Compactar HTML para a versão publicável: as sequências de espaços viram um espaço e o recuo desaparece, enquanto tags, atributos, comentários, entidades e doctype permanecem como estavam.
Copiar leva o resultado visível e Limpar esvazia a caixa e a área de resultado.

O que cada botão faz com os espaços

Ler ou publicar

Formatar serve para ler. Cada tag vai para a própria linha, o recuo segue a profundidade do aninhamento e os espaços do texto são normalizados. Como o recuo insere espaços onde não havia, uma página formatada pode renderizar diferente do original: <div><span>a</span><span>b</span></div> aparece como "ab", e a versão formatada como "a b".

Compactar serve para publicar. Uma sequência de espaços vira um espaço — do jeito que o navegador lê —, então a quebra de linha entre dois elementos em linha sobrevive como um espaço em vez de desaparecer. Verificado nos seis idiomas, o resultado compactado renderiza igual à entrada em sequências em linha, listas, tabelas e blocos aninhados.

O que a compactação não toca

O conteúdo de pre e textarea é copiado byte a byte, porque seus espaços fazem parte do documento e não do layout. O mesmo vale para o conteúdo de script e style, escritos em outras linguagens: remover uma quebra de linha ali transformaria o resto de um comentário // em código ou mudaria o conteúdo de um template literal.

Valores entre aspas são preservados exatamente, incluindo sequências de espaços, estejam em value, title ou num atributo data-*. Texto de comentário, entidades como   e ©, tags autofechadas e o doctype também passam sem alteração. O que desaparece é apenas o espaço entre as coisas.

Repetir a operação e a quebra em 80 caracteres

Clicar de novo não muda mais nada: um documento formatado se formata nele mesmo e um compactado se compacta nele mesmo. O painel de resultado é uma prévia colorida, então o botão Copiar, e não uma seleção manual, é o caminho confiável para tirar o texto.

No resultado formatado, uma tag cujos atributos passariam de 80 caracteres é quebrada para a linha seguinte, e a quebra cai entre atributos, nunca dentro de um valor entre aspas. O texto não é quebrado, e a saída compactada não contém quebra de linha alguma fora dos blocos protegidos.

Onde roda e quanto custa

Formatar e compactar rodam na página: ao clicar nos botões nenhuma requisição saiu do navegador, então a marcação colada nunca é enviada e a ferramenta continua funcionando sem conexão.

O trabalho acompanha o tamanho da entrada. 176 KB levaram cerca de 0,6 segundo para formatar e 0,5 para compactar; uma página de 716 KB levou 2,4 e 2,1 segundos. O minificador é uma passada de espaços e não um analisador HTML completo — não reescreve as aspas dos atributos nem remove tags de fechamento opcionais —, e o mesmo motor alimenta o formatador de JavaScript, então um bloco script dentro da marcação é formatado como JavaScript.