Formatador de HTML
Embeleze HTML bagunçado, ou minifique para produção.
Funciona no navegador. Nada do que você digita é enviado a lugar nenhum.
- Indentação de 2 ou 4 espaços
- Minificar em um clique
- Nada é enviado
Como formatar HTML
- Cole seu HTML.
- Escolha um tamanho de indentação, ou ative minificar.
- Copie ou baixe o resultado.
Embelezar vs minificar
| Embelezar | Minificar | |
|---|---|---|
| Indentação | Adiciona 2, 4 ou 8 espaços | Remove |
| Comentários | Mantidos | Removidos |
| Espaço em branco entre tags | Normalizado | Removido |
| Conteúdo em pre, textarea, script, style | Intocado | Intocado |
Onde HTML minificado importa
- Uma página em produção carrega um pouco mais rápido e usa menos banda depois que o espaço em branco e os comentários somem.
- Marcação minificada é mais difícil de ler no view-source, o que é uma troca justa em produção mas um problema ao depurar.
Dicas para formatar HTML
- Mantenha uma cópia legível e indentada no controle de versão e minifique só o que você faz deploy, já que depurar marcação minificada a olho é demorado.
- Indentação de 2 espaços combina com marcação bem aninhada, e 4 espaços é mais fácil de examinar em páginas simples e rasas.
O que a indentação afeta e o que não afeta
- Nunca muda o que o navegador renderiza, já que o espaço em branco entre tags de bloco colapsa de qualquer jeito.
- Pode mudar visivelmente o espaçamento entre elementos inline como <span>, se um design depender de espaço em branco exato ali. Confira esses pontos depois de formatar.
- Não tem efeito no comportamento do JavaScript, já que a estrutura do DOM da página continua a mesma de qualquer jeito.
Perguntas frequentes sobre Formatador de HTML
O que minificar faz aqui?
Remove comentários e o espaço em branco entre as tags, sem mexer no texto ou nos atributos dentro de tags pre, textarea, script e style.
Formatar muda a aparência da minha página?
Não. Indentação e espaçamento entre tags não afetam a renderização, então a página fica igual antes e depois.
Corrige tags quebradas ou não fechadas?
Não. Ele reformata o HTML que você fornece. Corrija tags faltando ou sem correspondência no seu editor primeiro.
Posso formatar um documento HTML completo?
Sim, incluindo o doctype, o head e o body. Documentos bem longos podem demorar um pouco para formatar.
Isso valida meu HTML?
Não. Reformata ou minifica qualquer marcação que você fornecer, e não confere texto alternativo ausente, tags não fechadas ou outros problemas de validação.
Tags style e script inline também são reformatadas?
Sim, ao embelezar. O formatador indenta o CSS dentro de uma tag style e o JavaScript dentro de uma tag script junto com a marcação ao redor.
Minificar remove comentários usados por um sistema de templates?
Comentários HTML padrão (<!-- ... -->) são sempre removidos, incluindo os que um sistema de templates pode usar como marcadores. Se seus comentários têm algum significado em outro lugar, formate só sem minificar.
Posso formatar só um fragmento, sem um documento completo?
Sim. Um trecho de algumas tags formata do mesmo jeito que uma página inteira. Não precisa de doctype, head ou body para funcionar.