Minificador e Formatador de HTML Online — Grátis, sem necessidade de carregar arquivos

Cole o seu HTML abaixo para o minificar — removendo comentários, atributos redundantes e espaços em branco extra — ou para o formatar em marcação legível e indentada. Ambas as direções usam um analisador HTML real, não truques com expressões regulares, pelo que o conteúdo dentro de <pre> e <textarea> permanece intacto.

O que é esta ferramenta?

Um minificador de HTML remove tudo o que um navegador não precisa para apresentar a página corretamente: comentários, espaços em branco extra entre tags, atributos redundantes como type="text/javascript" e barras de fecho opcionais. O resultado é um HTML funcionalmente idêntico que descarrega e é analisado mais rapidamente.

Esta ferramenta é construída sobre o html-minifier-terser, o mesmo minificador utilizado em ferramentas de build populares, pelo que compreende a estrutura do HTML em vez de remover espaços em branco às cegas — não altera conteúdo sensível à formatação dentro de <pre>, <textarea> ou blocos <script>/<style> inline, e também consegue minificar o CSS e o JS incorporados na sua marcação.

Por que usar?

Analisador real, não expressões regulares — seguro em casos limite como blocos <pre>, scripts inline e comentários condicionais.
Também minifica o conteúdo de <style> e <script> incorporado, e não apenas a marcação em redor.
Veja exatamente quantos bytes poupou antes de publicar o arquivo.
O modo Formatar transforma HTML comprimido numa única linha novamente em algo legível e editável.
Processamento 100% local — a sua marcação, e qualquer informação privada nela contida, nunca sai do seu navegador.

Como usar

Cole o seu HTML na caixa de entrada, ou clique em «Carregar exemplo» para experimentar.
Clique em «Minificar» para o comprimir, ou em «Formatar» para o embelezar com indentação de 2 espaços.
Verifique a mensagem por baixo das caixas — o modo minificar mostra a redução de tamanho; se o HTML não puder ser analisado, verá o erro exato em vez de um resultado corrompido.
Clique em «Copiar» para obter o resultado.

Exemplo

Entrada

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

Resultado

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

Comentários, indentação e quebras de linha são removidos; o doctype é abreviado. A página visível é apresentada de forma idêntica.

Dicas práticas

Minifique mesmo antes de fazer o deploy, não durante o desenvolvimento — mantenha o HTML legível no controlo de versões e minifique apenas o resultado do build.
Se uma página se comportar de forma estranha depois de minificada, verifique se existe JavaScript que dependa de espaços em branco exatos dentro de nós de texto (raro, mas acontece com alguns widgets mais antigos).
Formatar o HTML minificado de um site ao vivo é uma forma rápida de inspecionar a sua estrutura antes de escrever um scraper ou depurar problemas de layout.
Combine com os minificadores de CSS e JS abaixo se o seu processo de build mantiver estilos e scripts em arquivos separados.

Onde isto se enquadra em fluxos de trabalho reais

Sites estáticos, templates de e-mail e landing pages criados à mão são frequentemente publicados com a mesma indentação e os mesmos comentários usados durante o desenvolvimento. Minificar antes do deploy reduz um peso de transferência real, embora modesto — e, no caso específico do HTML de e-mails, o número de caracteres por vezes afeta o limiar de corte do Gmail, pelo que uma marcação mais pequena tem um benefício funcional para além da velocidade.

A direção Formatar é igualmente útil ao contrário: colar uma página minificada obtida a partir de «ver código-fonte» e reformatá-la é frequentemente a forma mais rápida de compreender a estrutura da landing page de um concorrente ou de depurar um embed de terceiros.

→ Minificador de CSS · Minificador de JavaScript

Casos de utilização comuns

Reduzir bytes de uma landing page estática ou template de e-mail antes de os publicar.
Reformatar um excerto de HTML minificado obtido a partir de «ver código-fonte» para compreender a sua estrutura.
Limpar HTML colado a partir de um editor WYSIWYG ou exportação de um CMS, que frequentemente traz espaços em branco excessivos.
Verificar rapidamente se um excerto de HTML escrito à mão está bem formado, já que uma falha de análise surge como um erro claro.

Perguntas frequentes

O meu HTML é carregado para algum lado?

Não. A minificação e a formatação acontecem localmente no seu navegador, utilizando JavaScript. Nada do que colar é enviado para um servidor, por isso é seguro utilizar com templates internos ou páginas ainda não publicadas.

Minificar pode danificar a minha página?

Não deveria — a ferramenta utiliza um analisador HTML real (html-minifier-terser) que compreende a estrutura das tags, pelo que preserva elementos sensíveis a espaços em branco, como <pre> e <textarea>, e não junta atributos incorretamente. Verifique sempre as páginas críticas depois de minificar, especialmente se dependerem de scripts inline pouco comuns.

Também minifica CSS e JavaScript dentro do HTML?

Sim. Os blocos <style> e <script> inline são minificados no próprio local, utilizando os mesmos motores das ferramentas dedicadas de minificação de CSS e JS, pelo que não precisa de os extrair manualmente.

Quanto é que o HTML costuma reduzir de tamanho?

Depende da quantidade de espaços em branco, comentários e formatação que o original tinha — HTML escrito à mão, com bastante indentação e comentários, costuma reduzir 20-40%. HTML gerado por frameworks, já compacto, poupará menos.

Posso converter HTML minificado de volta para um formato legível?

Sim — cole o HTML minificado e clique em «Formatar» em vez de «Minificar» para obter marcação corretamente indentada e legível.

Minificador e Formatador de HTML