Formatar e Minificar HTML - legível ou compacto

Formatador e minificador HTML


            

O que esta ferramenta faz

Duas tarefas opostas sobre o mesmo texto. Formatar acrescenta quebras de linha e indentação para uma pessoa acompanhar o aninhamento; minificar tira tudo de que o navegador não precisa. Aqui as duas atuam sobre os caracteres que você deu, não sobre um documento reconstruído, então o que sai ainda é a sua marcação.

Como usar

  1. 1 Cole o HTML: uma página inteira ou apenas um fragmento.
  2. 2 Escolha a indentação e depois Formatar ou Minificar.
  3. 3 Copie o resultado ou passe pelo outro botão para comparar.

Espaço em branco nem sempre é ruído

Entre dois elementos em linha, um único espaço é texto visível: tire-o e «um dois» vira «umdois». Entre elementos de bloco, esse mesmo espaço não significa nada. O minificador aqui remove a indentação, mas mantém o espaço separador onde ele faz trabalho de verdade.

Por que pre e textarea ficam intocados

Dentro deles, cada espaço e cada quebra de linha é conteúdo que o leitor vai ver. Reindentar um bloco de código mudaria em silêncio o que ele mostra, e aparar um textarea mudaria o valor que o formulário envia. O mesmo vale para script e style: o conteúdo deles é outra linguagem e passa intocado.

Ele formata, não conserta

Ferramentas construídas sobre o parser do navegador consertam em silêncio a marcação quebrada: fecham suas tags, jogam fora as soltas e movem elementos para onde a especificação manda. Ao depurar, isso quase nunca é o que você quer: o bug que você persegue pode ser exatamente o que foi consertado. Esta reformata o texto e deixa os erros onde você consegue vê-los.

Minificar HTML é o ganho pequeno

Tirar espaços de uma página costuma economizar poucos por cento, e o gzip no servidor teria comprimido quase tudo isso de qualquer forma. O peso de verdade está em imagens, fontes e scripts. Minifique o HTML porque um gerador de templates deixou a saída ilegível, não porque você espera a página ficar muito mais rápida.

Formatação de HTML - perguntas frequentes

A formatação pode, num caso específico: acrescentar quebras de linha entre elementos em linha introduz um espaço que não existia. Se um layout depende de dois span encostados, formate o bloco em volta mas deixe aquela linha em paz. A minificação foi feita para evitar o inverso do mesmo problema.
Novo
Minificar CSS Comprima CSS removendo comentários e espaços, ou expanda de volta com indentação limpa. Mantém os espaços de calc(), as strings e as licenças.
Popular Hoje
Testador de Regex Escreva uma expressão regular e veja na hora as correspondências, os grupos e a substituição. Um padrão descontrolado é interrompido em vez de travar a aba.

Ferramentas Relacionadas

Gerador MD5 Gerador de MD5 gratuito: converta texto ou ficheiros numa soma de verificação MD5 no navegador - ideal para verificar a integridade.
Codificador e Decodificador Base64 Codificador e descodificador Base64 gratuito: converta texto ou ficheiros para Base64 e de volta, tudo no navegador e sem enviar nada.
Gerador de Lorem Ipsum Gerador de Lorem Ipsum gratuito: crie texto de exemplo por parágrafos, frases ou palavras, com etiquetas HTML para as suas maquetas.
Decodificador JWT Descodificador JWT gratuito: cole um token para ler cabeçalho, payload e assinatura - tudo no navegador, sem enviar nada.
Codificador e Decodificador de URL Codificador e descodificador de URL gratuito: converta links e parâmetros para codificação percentual e de volta, por completo ou por partes.

Outras ferramentas que você pode gostar

Word para PDF Converta Word para PDF gratuitamente: carregue um ficheiro DOC, DOCX, ODT ou RTF e obtenha um PDF bem formatado em segundos.
PDF para Word Converta PDF para Word gratuitamente: carregue um PDF e transfira um DOCX editável em segundos - sem registo e sem marca de água.
Contador de Palavras Contador de palavras gratuito: cole um texto para contar palavras, caracteres, frases e parágrafos e ver o tempo de leitura, sem enviar nada.
Contador de Caracteres Contador de caracteres gratuito: caracteres com e sem espaços, palavras e linhas, e ainda os limites SEO de títulos e meta descrições.
Verificador de Densidade Analisador de densidade de palavras-chave gratuito: cole um texto ou URL e veja a frequência de cada palavra e expressão, em percentagem.