HTML Formatter
Understand HTML Formatter
Este formatador indenta HTML pela profundidade de aninhamento, ou o reduz a uma linha com os comentários removidos.
How it works
A marcação é dividida em tags, comentários e trechos de texto, e o nível de indentação sobe a cada tag de abertura e desce a cada tag de fechamento. Elementos vazios (br, img, input, meta, link) nunca abrem um nível porque não têm o que fechar, e elementos inline (a, span, strong, code e os demais) são deliberadamente mantidos no mesmo nível, para que uma frase não seja quebrada em uma palavra por linha. A minificação faz o inverso: os comentários são removidos e o espaço em branco entre tags é reduzido.
When to use it
- Ler o código-fonte de uma página depois de ela ter sido minificada ou emitida por uma ferramenta de build.
- Desembaraçar um componente aninhado ou um template de e-mail para achar onde uma div ficou sem fechar.
- Limpar marcação colada de um editor WYSIWYG ou de um campo de CMS.
- Conferir a estrutura de um fragmento antes de colá-lo em um template.
Watch out for
- O espaço em branco entre elementos inline é renderizado. Reduzir </span> <span> a </span><span> remove um espaço que o leitor vê, então a saída minificada nem sempre é visualmente idêntica.
- Isto é uma passagem textual, não um parser de HTML. Conteúdo dentro de script, style, pre e textarea é tratado como marcação comum, então embelezar uma página vai reindentar exemplos de código e texto pré-formatado, onde o espaçamento tem significado.
- A minificação remove todos os comentários, inclusive comentários condicionais dos quais um template de e-mail depende para versões antigas do Outlook e qualquer marcador que as suas ferramentas leiam.
- Tags desbalanceadas produzem indentação estranha em vez de um erro — uma saída que avança cada vez mais para a direita normalmente indica uma tag que nunca foi fechada.
Not the right tool for: Minificar HTML para produção. Um minificador de build interpreta o documento e sabe qual espaço em branco pode ser removido com segurança; faça isso no pipeline em vez de colando aqui.
Frequently Asked Questions
Dá para formatar só um trecho, e não um documento inteiro?
Sim — cole qualquer fragmento (uma div, um template parcial ou até um único elemento). O formatador não exige uma estrutura completa de DOCTYPE/html/head/body.
Isto lida com templates Jinja, Handlebars ou Mustache?
A sintaxe de template ({{ }}, {% %}, {{{ }}}) é preservada como está, já que o formatador a trata como conteúdo de texto. A estrutura HTML em volta das tags de template é formatada normalmente.
Qual é a diferença entre minificação de HTML e gzip?
A minificação remove comentários, espaços em branco e tags de fechamento opcionais do HTML de origem, economizando tipicamente de 5% a 15%. O gzip comprime ainda mais a saída minificada (em geral 60% a 80% adicionais). Os dois devem ser usados em produção — minifique primeiro e depois aplique gzip pela compressão do servidor.
How to Use HTML Formatter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.