Formatador de HTML que preserva os seus comentários

Introdução

O HTML tirado de um site no ar, exportado de um construtor de páginas ou copiado de um modelo de e-mail costuma vir comprimido em poucas linhas, sem nenhuma indentação — tecnicamente válido, mas bem difícil de uma pessoa ler. Embelezar inverte isso: reconstrói as quebras de linha e a indentação que deixam o aninhamento das tags à vista, sem mudar nada do que a marcação faz. Isso conta sempre que a intenção é realmente ler ou estudar o HTML, e não apenas fazer o navegador exibi-lo — entender como uma página foi montada, conferir o código que um aluno entregou ou descobrir por que algo não está aparecendo direito.

Como esta ferramenta formata o seu código

Ao colar o HTML e clicar em “Embelezar”, ele é reconstruído com indentação de dois espaços, um nível de aninhamento por tag, de modo que fica claro de imediato quais elementos estão dentro de quais. Vale conhecer alguns detalhes de como a ferramenta lida com HTML do mundo real:

• Os comentários são mantidos, não removidos. Comentários de HTML, inclusive comentários condicionais e blocos CDATA, passam sem alteração — útil se o seu código traz créditos, anotações TODO ou um comentário de licença que precisa continuar ali.
• Blocos <script> e <style> são reposicionados, não reescritos. A indentação deles é ajustada ao ponto em que ficam dentro do HTML ao redor, mas o JavaScript ou o CSS lá dentro não é reformatado por conta própria. Se o código dentro de um bloco de script ou de estilo já estava bagunçado, continua bagunçado — o que se organiza é apenas a posição dele em relação ao HTML em volta. Use JavaScript Beautifier ou CSS Beautifier diretamente nesse conteúdo se ele precisar da própria formatação.

O que saber antes de usar

Esta ferramenta dá conta bem de HTML comum e bem formado. Há três coisas específicas que vale conferir antes de confiar no resultado em marcações menos usuais:

• Alguns elementos HTML5 de fechamento automático não são reconhecidos como tais. A lista de tags que esta ferramenta trata como dispensadas de tag de fechamento, comparada com a lista de elementos vazios da especificação HTML atual, deixa de fora algumas das mais recentes — especificamente <source> (usada dentro de <video>, <audio> e <picture>), <track> (usada dentro de <video> para legendas) e <col> (usada dentro de <colgroup> em tabelas). Se o seu HTML usa alguma delas escrita do jeito normal — sem a barra final explícita /> —, tudo o que vier depois pode acabar indentado um nível a mais, já que o formatador continua esperando uma tag de fechamento que nunca chega. Escrever essas tags com a barra de fechamento explícita (<source />) evita o problema.
• Ela não conserta HTML quebrado. Se uma tag do seu código original nunca é fechada, ou se há tags mal pareadas, esta ferramenta reformata a estrutura que encontra sem travar, mas também não insere a tag de fechamento que falta nem resolve o problema de fundo. O resultado continuará sem aquilo que já faltava na entrada — é um formatador, não um validador.
• Tags em linha no meio de uma frase podem ir parar em uma linha só delas. Tags como <strong>, <em> ou <a> dentro de um parágrafo de texto corrido podem terminar separadas das palavras ao redor, porque esta ferramenta não as trata como tags a “manter em linha”, como fazem alguns outros formatadores. Isso não muda como o HTML é exibido no navegador — o espaço em branco entre tags é reduzido de qualquer jeito —, mas é bom já esperar por isso ao formatar conteúdo com muito texto e muitas tags de estilo em linha.

Nada disso muda o que o HTML de fato faz quando um navegador o exibe — tudo aqui diz respeito à aparência do código para quem o lê diretamente, não a como a página aparece.

Quando esta é a ferramenta certa

• Ler o HTML de uma página real para aprender com ela. Ver o código-fonte de um site ou inspecioná-lo pelas ferramentas de desenvolvedor do navegador quase sempre mostra marcação comprimida ou gerada automaticamente, com pouca estrutura — embelezar torna possível estudar de verdade como a página foi construída, um uso legítimo de letramento digital que vai além de formatar o próprio código.
• Corrigir o trabalho de HTML de um aluno. Código que passou de um editor para outro ou saiu de um construtor de páginas às vezes perde a formatação original; embelezá-lo antes da leitura acelera a correção e o retorno para a turma.
• Investigar marcação que não está sendo exibida direito. Em HTML denso e sem formatação é mais difícil localizar uma tag faltando ou fora de lugar — formatar primeiro costuma fazer o problema estrutural saltar aos olhos, lembrando que esta ferramenta não vai consertar para você uma tag realmente quebrada.

Se o seu HTML usa bastante as tags <source>, <track> ou <col> sem a barra de fechamento explícita, confira com atenção a indentação depois dessas tags no resultado — veja a limitação acima. Para marcação de página comum, esta ferramenta é um caminho rápido para uma estrutura legível, sem instalar editor nem extensão.

Exemplo

Um aluno recebe a tarefa de inspecionar a página inicial de um site real e descrever como a navegação principal está estruturada no HTML. O código-fonte da página mostra uma única linha densa e minificada, sem espaçamento algum. Colada nesta ferramenta e embelezada, ela vira marcação bem indentada, o que finalmente permite enxergar quais elementos <nav>, <ul> e <li> estão aninhados dentro de quais e como a navegação se relaciona com o resto da página — exatamente o tipo de leitura estrutural que é bem mais difícil de fazer em uma única linha sem formatação.

Perguntas frequentes

Embelezar muda a forma como o HTML é exibido?

Não. Mudam apenas os espaços e as quebras de linha — as tags, os atributos e o conteúdo continuam os mesmos, então a página é exibida de forma idêntica no navegador nos dois casos.

Os comentários de HTML são removidos?

Não — os comentários, inclusive os condicionais, são mantidos como estão no resultado.

O CSS ou o JavaScript dentro do meu HTML também são formatados?

Não de forma independente. Blocos <script> e <style> são reposicionados para acompanhar a indentação do HTML ao redor, mas o código dentro deles não é reformatado por conta própria. Use JavaScript Beautifier ou CSS Beautifier diretamente nesse conteúdo se ele precisar da própria formatação.

Ela conserta tags quebradas ou não fechadas?

Não. Esta ferramenta formata a estrutura que encontra; ela não valida o HTML nem insere tags de fechamento que estejam faltando.

Ela lida corretamente com as tags <source>, <track> e <col>?

Não de forma confiável quando elas são escritas sem a barra de fechamento explícita — o conteúdo seguinte pode acabar indentado um nível a mais. Escrevê-las como <source /> evita isso. Veja “O que saber antes de usar” acima.

Meu código fica salvo em algum lugar?

Não. O HTML colado é processado para gerar o resultado formatado e não é guardado depois; registra-se apenas o fato de a ferramenta ter sido usada, não o código em si.

Quais ferramentas relacionadas posso usar?

Use JavaScript Beautifier ou CSS Beautifier para formatar o JavaScript ou o CSS dentro do seu HTML, ou HTML Minifier para comprimir de volta o HTML pronto para produção.