Formatador HTML Grátis
Este formatador HTML gratuito transforma marcação minificada ou desorganizada em código com uma tag de bloco por linha e indentação consistente, para que você veja como os elementos estão aninhados. Tags inline permanecem com seu texto, elementos curtos ficam em uma linha, e o conteúdo de blocos pre, textarea, script e style é deixado exatamente como escrito. Ideal para desenvolvedores e profissionais de marketing que precisam ler ou editar o código-fonte da página.
HTML Beautifier
Generators and Converters
Sobre esta ferramenta
As páginas geralmente são entregues como uma única linha longa, ou com marcação indentada por várias ferramentas e pessoas diferentes. Ler isso é lento e os erros se escondem facilmente: uma div não fechada, uma tag perdida ou um título no lugar errado. Indentar cada nível torna o aninhamento visível à primeira vista.
O formatador divide a marcação em tags, comentários e texto, depois indenta pela profundidade de cada elemento de bloco. Tags inline como a, strong, em e span permanecem dentro do parágrafo, e elementos void como br, img, input e meta não aumentam a profundidade. Você pode escolher dois espaços, quatro espaços ou tabulações. O texto dentro de pre e textarea e o código dentro de script e style nunca são reformatados, porque espaços em branco extras ali podem mudar o que a página mostra ou faz.
Ele formata o que você fornece e não repara HTML quebrado, então uma tag não fechada aparecerá como uma indentação que nunca retorna. Use antes de editar um template, ao comparar duas versões de uma página, ou ao verificar o HTML que um plugin produziu. Nada que você cola é armazenado.
Perguntas frequentes
Formatar muda como a página se parece?
Não deveria. A ferramenta apenas adiciona quebras de linha e indentação entre tags de bloco, e o conteúdo em pre, textarea, script e style não é tocado. Navegadores colapsam espaços em branco entre a maioria dos elementos, então compare a página antes e depois se o espaçamento exato importa para você.
Pode corrigir HTML inválido?
Não. Formata as tags que encontra e não adiciona tags de fechamento ausentes ou reordena elementos. Aninhamento quebrado geralmente aparece como indentação que não retorna à esquerda, o que ajuda a encontrar o problema, mas você ainda precisa corrigir a marcação você mesmo.
Qual é a diferença entre formatar e minificar?
São opostos. Um formatador adiciona quebras de linha e indentação para que as pessoas possam ler o código. Um minificador remove-os para que o arquivo seja menor para download. Mantenha a versão formatada enquanto trabalha e publique uma cópia minificada.
Qual indentação devo escolher?
Use o que seu projeto já usa. Dois espaços mantém a marcação profunda estreita, quatro espaços é comum em muitos guias de estilo, e tabulações permitem que cada pessoa defina sua própria largura no editor. A escolha não muda como a página funciona.