HTML Beautifier
Formata HTML minificado ou desordenado com indentação de tags adequada.
Enter some HTML on the left to see the result here.
What is HTML Beautifier?
Um formatador de HTML pega marcação minificada, gerada por máquina ou desordenada e a reemite com quebras de linha consistentes e indentação aninhada, tornando a hierarquia de tags — o que está dentro do que — óbvia à primeira vista em vez de estar enterrada em uma linha longa. Isso é inestimável quando você está inspecionando a fonte de uma página, depurando um modelo que renderiza HTML como uma string única ou revisando a saída de uma ferramenta de build ou CMS que remove espaços em branco para produção. Essa ferramenta funciona inteiramente em seu navegador: ela tokeniza a marcação em tags e texto, rastreia a profundidade de aninhamento com uma pilha simples e relata um erro claro se encontrar uma tag de fechamento que não corresponde — tudo sem enviar sua marcação para lugar algum.
How to Use HTML Beautifier
- Cole seu HTML na caixa de entrada.
- O resultado formatado e indentado aparece instantaneamente à direita.
- Se uma tag estiver não fechada ou não correspondente, a caixa de entrada mostra exatamente qual é em vez de um resultado em branco ou ilegível.
- Clique em "Copiar" para capturar a saída formatada.
Examples
Marcação minificada
Input: <div><p>hello</p></div>
Output: <div> <p> hello </p> </div>
Elemento vazio
Input: <div><img src="a.png"><p>text</p></div>
Output: <div> <img src="a.png"> <p> text </p> </div>
Common Mistakes
- Colar um fragmento de HTML que está faltando uma tag de fechamento e esperar um resultado completo — a ferramenta dirá qual tag está não fechada em vez de adivinhar como fechá-la para você.
- Assumir que o conteúdo reformatado de <script>/<style> significa que o próprio JS ou CSS é embelezado também — não é, apenas a estrutura de marcação ao redor é reformatada.
- Esperar que os valores dos atributos sejam reformatados ou reordenados — os atributos são deixados exatamente como digitados dentro de sua tag.
- Colar um documento HTML completo e esperar que os comentários ou o DOCTYPE sejam removidos — eles são preservados, apenas indentados no lugar, desde que embelezar não é a mesma operação que minificar.
Why Use This Tool
- Processa completamente no lado do cliente — nada do que você cola é enviado para um servidor.
- Corretamente ignora os corpos de <script>/<style> em vez de corrompê-los.
- Elementos vazios são tratados corretamente, então a indentação não se desvia após um <br> ou <img>.
- Aponta para a tag específica não fechada ou não combinada em caso de erro, em vez de falhar silenciosamente.