Minify código HTML instantaneamente para reduzir o tamanho do arquivo e melhorar a velocidade de carregamento do site.
Introdução
O HTML escrito para edição e o HTML entregue ao navegador não precisam ser o mesmo arquivo. Enquanto você monta uma página, o recuo e as quebras de linha deixam a estrutura fácil de acompanhar, e os comentários deixados na marcação explicam trechos ou guardam lembretes para depois. O navegador não precisa de nada disso para renderizar a página corretamente — ele só precisa de tags válidas e bem formadas. Minificar tira o que está ali puramente para um leitor humano, de modo que a mesma página chega ao navegador como um arquivo menor.
Como esta ferramenta minifica o seu HTML
- Todos os comentários são removidos, sem exceção. Cada bloco
<!-- ... -->é retirado, inclusive os antigos comentários condicionais do Internet Explorer e qualquer comentário que você quisesse manter, como um aviso de licença ou atribuição. Aqui não existe equivalente à convenção de “manter este” que o minificador de CSS deste site aceita — se um comentário importa, guarde-o na sua cópia de trabalho e não conte com ele sobrevivendo à minificação. - O conteúdo dentro das tags
<pre>,<code>,<script>e<textarea>mantém o espaçamento exato. Quebras de linha e espaços têm significado dentro dessas tags — um exemplo de código ou um bloco de texto pré-formatado apareceria errado se o espaçamento interno fosse comprimido —, e esta ferramenta deixa esse espaço em branco intocado. - O espaço em branco no resto é comprimido, não apagado. Uma sequência de espaços, tabulações ou quebras de linha entre dois elementos em linha (um link no meio de uma frase, por exemplo) é reduzida a um único espaço em vez de sumir de vez, para que palavras vizinhas não fiquem grudadas. Só o espaço entre tags estruturais de nível superior e dentro de
<head>é cortado por completo, já que ali nada é jamais exibido como texto corrido visível. - A barra final das tags que se fecham sozinhas é normalizada.
<img src="photo.jpg" />vira<img src="photo.jpg">— as duas formas são HTML válido, e a mais curta economiza alguns caracteres em cada tag autofechada da página.
O único risco real: comentários dentro de conteúdo pré-formatado
Como a remoção de comentários acontece numa primeira passada por tudo que você colou, antes de a ferramenta olhar dentro de qual tag cada coisa está, ela não consegue distinguir um comentário comum, destinado a ser apagado, do texto literal <!-- ... --> que você exibe de propósito dentro de um bloco <pre> ou <code> — por exemplo, um exemplo de código num tutorial mostrando como é um comentário de HTML. Nesse caso específico, o texto do exemplo seria retirado ainda que o espaçamento em volta dele, dentro do mesmo bloco, seja preservado direitinho. Isso só afeta texto que contenha literalmente os caracteres <!-- e --> dentro de um bloco pré-formatado; não afeta exemplos de código comuns que não incluem sintaxe de comentário como parte do que mostram.
O que saber antes de minificar
Esta ferramenta muda apenas a formatação — não reordena elementos, não junta tags nem remove nada da estrutura real da página. Não há limite de tamanho para o que você colar, já que aqui se trabalha direto com texto em vez de enviar um arquivo; o HTML completo de uma página, mesmo longo, cola e é processado do mesmo jeito que um trecho curto.
Como com qualquer minificador, vale carregar a saída minificada num navegador antes de publicar — não porque a conversão seja pouco confiável, mas porque é boa prática confirmar que a página aparece e se comporta como você espera antes de ir ao ar, do mesmo modo que se revisa qualquer outra coisa antes de entregar ou publicar.
Quando esta é a ferramenta certa
- Preparar uma página para publicação depois de terminar a edição. Continue trabalhando com a versão legível enquanto monta a página, e minifique uma única vez, pouco antes de ela ir ao ar — não como formato de trabalho.
- Cortar o peso da página em hospedagem limitada ou conexão lenta. Um arquivo HTML menor baixa mais rápido, o que pesa mais do que parece na rede de uma escola ou num celular usando dados móveis.
- Comparar código-fonte para ver como é de fato o HTML de produção. Ver o código-fonte de um site real costuma mostrar um HTML compacto que não se parece nada com o que a gente escreve à mão — minificar a própria página e comparar lado a lado é um jeito concreto de entender por quê.
Exemplo
Uma aluna termina uma página de portfólio pessoal para a aula de design web, com comentários espalhados pela marcação vindos de rascunhos anteriores, além de um exemplo de código dentro de um bloco <pre> mostrando como é um comentário de HTML, como parte da explicação do que ela aprendeu. Antes de entregar o trabalho, cola a página inteira aqui. A página renderizada aparece e se comporta exatamente igual, os comentários que sobraram do rascunho sumiram, e o arquivo ficou menor — mas o exemplo de comentário dentro da amostra de código também sumiu, porque por acaso continha os caracteres literais <!--/-->. Ajustar esse exemplo específico para evitar a sintaxe exata de comentário, ou deixar aquele trecho fora do que vai ser minificado, resolve o problema.
Perguntas frequentes
Minificar muda a aparência da minha página?
Não. Tags e estrutura são preservadas — só mudam formatação, espaço em branco e comentários, e nada disso afeta como a página é renderizada.
O que acontece com os comentários do meu HTML?
Todos são removidos, sem exceção — não há como marcar um comentário para manter, diferente do minificador de CSS deste site.
O espaço em branco dentro de um bloco <pre> ou <code> é preservado?
É. O espaçamento e as quebras de linha dentro dessas tags, e dentro de <script> e <textarea>, ficam exatamente como você escreveu. A única exceção é se esse conteúdo incluir literalmente sintaxe de comentário (<!-- -->) como texto que você está exibindo — isso é removido junto com os comentários de verdade, já que a remoção de comentários acontece antes de a ferramenta olhar dentro de qual tag aquilo está.
Existe limite de tamanho?
Não — você está colando texto, não enviando um arquivo, então não há um limite fixo como existe nas ferramentas de envio de arquivos deste site.
Meu código fica salvo em algum lugar?
Não. O HTML colado é processado para gerar o resultado minificado e não fica armazenado como arquivo nem guardado depois; registra-se apenas que a ferramenta foi usada, não o código em si.
Que ferramentas relacionadas posso usar?
Para outros formatos de código, use CSS Minifier e JavaScript Minifier para minificar, ou CSS Beautifier e JavaScript Beautifier para reverter o processo.
