Para que serve um formatador de HTML
HTML copiado de um site, exportado de um construtor visual ou gerado por um CMS costuma chegar em uma única linha gigante ou com indentação aleatória. Ler, revisar ou editar esse código é cansativo. Um formatador reescreve o documento com uma estrutura consistente: cada elemento de bloco na sua linha, filhos indentados, atributos longos quebrados em várias linhas.
Esta ferramenta usa o Prettier, o formatador padrão em muitos projetos front-end. Você escolhe a indentação (2 espaços, 4 espaços ou tabulação) e a largura máxima da linha (80, 100 ou 120 caracteres). O CSS dentro de <style> e o JavaScript dentro de <script> também são formatados, então um documento inteiro fica legível de uma vez.
Formatar não muda o significado do HTML, mas o Prettier é cuidadoso com os espaços em elementos inline, porque um espaço entre duas palavras pode ser visível na página. Por isso, às vezes ele quebra uma linha de um jeito que parece estranho, como fechar uma tag no início da linha seguinte: é proposital, para não adicionar espaços que não existiam. Se o HTML tiver um erro de sintaxe, a mensagem do analisador aparece no lugar do resultado.
O código é formatado no seu navegador, sem envio a servidores. O teste grátis cobre um arquivo ou um texto colado; você pode reformatar esse mesmo texto com outras opções, mas um novo conteúdo pede o ToolStudio Pro, com uso ilimitado, vários arquivos de uma vez em um ZIP e sem anúncios.
Como formatar HTML
- Cole o HTML na caixa de entrada ou arraste um arquivo .html.
- Escolha a indentação (2 espaços, 4 espaços ou tabulação) e a largura da linha (80, 100 ou 120).
- Clique no botão para formatar.
- Copie o código formatado ou baixe o arquivo.
Quando formatar HTML
- Ler o HTML minificado de uma página para entender a estrutura.
- Limpar código exportado de construtores visuais antes de editá-lo à mão.
- Padronizar a indentação de templates antes de um commit ou code review.
- Revisar templates de e-mail com tabelas aninhadas.
- Organizar trechos de HTML colados em documentação ou tutoriais.
Formatar e minificar: o mesmo código, dois públicos
O código formatado é para pessoas: fácil de ler, revisar e comparar em um diff. O código minificado é para o navegador: o menor possível. Um fluxo comum é manter o código-fonte formatado no repositório e gerar a versão minificada só na publicação.
Se você recebeu um HTML minificado, formate-o para trabalhar e minifique de novo antes de publicar. Comentários removidos na minificação não voltam ao formatar.
Perguntas Frequentes
O formatador altera o funcionamento do HTML?
Não. Ele só muda espaços, quebras de linha e indentação, tomando cuidado para não criar espaços visíveis em elementos inline.
O CSS e o JavaScript dentro do HTML também são formatados?
Sim. O conteúdo de <style> e de <script> é formatado com as mesmas opções de indentação e largura.
Qual indentação devo usar?
Use a do seu projeto. Na falta de uma convenção, 2 espaços é a mais comum em HTML.
Meu código é enviado para algum lugar?
Não. O Prettier roda no seu navegador e o código fica no seu computador.
É grátis?
Você pode testar com um arquivo ou um texto colado e reformatá-lo com outras opções quantas vezes quiser. Para novos conteúdos é preciso o ToolStudio Pro, que dá uso ilimitado, vários arquivos de uma vez em ZIP e nenhum anúncio.