Formatador de HTML

Cole um documento ou trecho de HTML e esta ferramenta formata com indentação adequada, ou reduz tudo a uma única linha compacta.

O que acontece com marcação malformada?

Nada quebra. O formatador usa js-beautify, que trabalha com tokens em vez de montar uma árvore DOM rígida, então tags não fechadas, tags de fechamento desencontradas ou um HTML sem <head> continuam sendo indentados normalmente, sem gerar erro. Dá para escolher indentação de 2 espaços, 4 espaços ou tab. A minificação funciona de forma parecida: é uma sequência de passes de texto que remove comentários e junta os espaços entre as tags, sem tentar consertar marcação mal aninhada ou tags não fechadas. Nos dois casos, você limpa um HTML bagunçado sem precisar caçar cada tag quebrada antes.

Uma coisa que a minificação preserva com cuidado é o conteúdo de <pre>, <textarea>, <script> e <style>. O espaço em branco dentro dessas tags costuma ter significado (as quebras de linha de um bloco <pre>) ou é código de verdade que juntar espaços poderia quebrar (JavaScript ou CSS inline), então a ferramenta pula esses blocos e só mexe no espaçamento entre tags comuns.

Alguma coisa disso é enviada para fora?

Não. Formatação e minificação rodam inteiramente no seu navegador, usando a biblioteca js-beautify carregada na página, sem nada sendo enviado a um servidor. Isso significa que templates de páginas, marcação de e-mails ou trechos extraídos com dados reais de clientes podem passar por essa ferramenta sem sair da sua máquina.

Para que serve na prática?

Os usos mais comuns são arrumar uma página minificada salva a partir do view-source para conseguir lê-la, reduzir o tamanho de um template de e-mail HTML antes de enviá-lo, ou reformatar a marcação de um componente com uma largura de indentação consistente antes de uma revisão de código. Também funciona no sentido contrário: se você tem um HTML escrito à mão com espaçamento inconsistente e quer uma linha única compacta para colar em um valor de configuração ou em um atributo data-*, a minificação resolve isso em um passo.

Alternar entre os dois modos também é uma forma rápida de comparar duas versões de uma página, já que ferramentas de diff funcionam muito melhor sobre marcação formatada de forma consistente do que sobre uma mistura de estilos de indentação. Quem mantém um site estático ou uma biblioteca de componentes ganha ao passar HTML gerado ou colado por aqui antes de commitar, mantendo o código com aparência uniforme mesmo quando as peças vêm de lugares diferentes.