Formatador e minificador de HTML

O que é um formatador de HTML?#

Um formatador de HTML pega em markup que perdeu a forma — saída de um motor de templates que colapsou cada tag numa linha, um excerto colado com o estilo de indentação de outra pessoa, ou um pedaço de um template de e-mail que cresceu ao longo de meses — e re-indenta-o de modo a que o aninhamento seja óbvio num relance. O trabalho inverso, minificar, comprime o mesmo markup removendo tudo o que um navegador não precisa: comentários e os espaços em branco entre tags.

Esta página faz ambos, e as duas direções são construídas de forma diferente porque o HTML o exige. Formatar usa o html_beautify do js-beautify, que indenta elementos de forma consistente e preserva as quebras de linha que realmente interessam. Minificar é um scanner conservador, escrito à mão. A regra mais importante que segue é que o conteúdo dos elementos <pre>, <code>, <textarea>, <script> e <style> é deixado completamente intacto — colapsar espaços em branco dentro de um bloco <pre> ou de um <script> corromperia a página, porque nesses elementos o espaço em branco é parte dos dados, não decoração. Um minificador ingénuo que não sabe isto é exatamente como uma amostra de código perde subitamente a indentação num site ao vivo.

Como usar#

1. Cole o seu markup no painel Entrada à esquerda, ou clique em Exemplo para um pequeno documento de exemplo.
2. Escolha a Indentação na barra de ferramentas: 2, 4 (a predefinição para HTML) ou tabulação. Quatro espaços é um estilo de casa comum para markup porque as tags aninhadas acumulam-se depressa.
3. Clique numa ação:
   • Formatar — re-indentar através do js-beautify, preservando mudanças de linha existentes para que linhas partidas manualmente não sejam esmagadas umas contra as outras.
   • Minificar — descartar comentários HTML, colapsar espaços em branco entre tags para nada, e aparar espaços em branco em nós de texto normais — deixando o interior de <pre>, <code>, <textarea>, <script> e <style> exatamente como estava escrito.
4. Leia o resultado no painel Saída. Use Copiar no cabeçalho da saída para o recolher; Limpar repõe ambos os painéis.

Principais funcionalidades#

• Preserva o que importa. O conteúdo de <pre>, <code>, <textarea>, <script> e <style> é copiado à letra durante a minificação. O espaço em branco dentro desses elementos é significativo; removê-lo mudaria o que o navegador renderiza.
• Comentários removidos ao minificar, mantidos ao formatar. Os blocos <!-- ... --> são removidos apenas quando se pede explicitamente para minificar. Formatar deixa-os no sítio.
• Indentação predefinida amiga do HTML. Quatro espaços, porque o markup profundamente aninhado lê-se melhor com um passo mais largo. Mude para 2 ou tabulação se isso corresponder ao seu projeto.
• Dois painéis, pronto a copiar. Entrada editável, saída só de leitura, cópia de um clique.
• Corre apenas no seu navegador. O js-beautify está empacotado com a página e carregado a pedido; sem backend, sem envio, o seu markup fica no seu dispositivo.

Exemplo prático#

Um fragmento de um cartão de produto puxado de um template, com um comentário e um bloco <pre> dentro:

Entrada:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

Clique em Formatar com 4 espaços:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

Agora clique em Minificar na mesma entrada:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

Três coisas a notar. O comentário desapareceu. O espaço em branco entre tags desapareceu — o </span> e <pre> agora ficam diretamente adjacentes, o que é seguro porque o espaço em branco entre tags em HTML é decorativo. Mas a mudança de linha dentro do <pre> (npm install sobre npm run build) ainda lá está, exatamente como estava escrito. Essa é a regra a fazer o seu trabalho: colapsar decoração, preservar dados.

FAQ#

Porque é que alguns espaços simples são mantidos entre tags depois de minificar?#

Os nós de texto só de espaços em branco que se sentam entre tags de nível de bloco são descartados inteiramente. Mas um único espaço dentro de uma linha de texto — Hello <em>world</em> — é significativo, porque removê-lo juntaria as palavras. O scanner mantém espaços significativos em nós de texto e só remove espaços em branco puramente decorativos entre tags.

O minificar remove atributos, aspas ou valores predefinidos?#

Não. Não reescreve a sintaxe de atributos, não retira aspas, não colapsa atributos booleanos, nem remove type="text". Essas transformações exigem um analisador HTML completo com conhecimento de esquema e são fáceis de errar; esta ferramenta fica pelo lado seguro e só remove comentários e espaços em branco decorativos.

Vai minificar o JavaScript dentro das minhas tags <script>?#

Não. Todo o conteúdo de <script> passa intocado — tanto porque alterá-lo podia partir o ASI como porque um minificador JS separado vive na página formatar/js. Se quer o script minificado, retire-o, passe-o por essa ferramenta, e depois coe-o de volta.

Percebe sintaxe de templating como {{ var }} ou {% if %}?#

Formatar vai re-indentar ao redor de tokens de template e normalmente produz saída legível. Minificar trata as tags de template como texto comum, pelo que não vai colapsar espaços em branco dentro delas de forma a alterar o seu significado. Para templating pesado, trate a saída como um forte ponto de partida e verifique contra o seu renderizador.