01 / Exemplo
Exemplo
Sua entrada
<main><h1>Olá</h1><p>Bem-vindo</p></main>Resultado
<main>
<h1>Olá</h1>
<p>Bem-vindo</p>
</main>Formatação de código / MULTIVERTO
Formatar HTML
Coloque tags HTML explicitamente aninhadas para facilitar a inspeção.
Conversor interativoSua entrada permanece neste navegador. Nenhum texto é enviado para conversão.
O arquivo permanece no seu navegador.
Encadear ferramentas
Aplique cada ferramenta de texto ao resultado anterior. Fluxos de trabalho com texto ↗
Somente o nome da sequência e a ordem das ferramentas são salvos neste navegador. Sua entrada e seus resultados nunca são salvos.
02 / Guia
Formatar HTML — Como funciona
O que muda nesta ferramenta
Organize tags HTML explicitamente aninhadas para facilitar a inspeção. A indentação e as quebras de linha revelam a estrutura sem alterar os tokens de entrada suportados. Este formatador mostra as tags aninhadas como uma árvore. Ele pode colocar elementos irmãos em linhas separadas, preservando o texto dentro deles. Use-o para inspecionar um componente ou fragmento de e-mail; um documento completo com tags de fechamento opcionais exige um parser compatível com navegadores.
Conheça o formato
HTML tem elementos, atributos e nós de texto, e espaço em branco no texto pode afetar a renderização. O formatador local aceita tags explicitamente aninhadas e retém o texto entre elas. Ele recusa contêineres de texto bruto, como script, style, pre e textarea, onde um scanner de tag geral pode ser enganoso.
Um fluxo de trabalho confiável
A formatação é mais útil durante a revisão ou depuração, quando o recuo pode expor um nível de aninhamento ausente ou um irmão inesperado. Cole um fragmento completo e representativo e execute o formatador uma vez. Leia a saída da estrutura mais externa para dentro, prestando atenção em onde cada elemento, bloco ou cláusula começa e termina. Esta página deliberadamente evita fingir ser um compilador para todas as possíveis extensões da linguagem. No exemplo, “<main><h1>Olá</h1><p>Bem-vindo</p></main>” produz a prévia compacta “<main> ⏎ <h1>Olá</h1> ⏎ <p>Bem-vindo</p> ⏎ </main>” (⏎ indica uma quebra de linha). Leia a pontuação, bem como as palavras visíveis: essa pequena amostra é um resultado observável desta operação em particular. Altere um recurso que você gosta na fonte e compare o mesmo lugar no resultado. Use um cartão curto com um elemento forte aninhado e um parágrafo vizinho. Após a formatação, identifique o pai de cada tag de fechamento antes da renderização. Se um navegador reparar silenciosamente entradas malformadas, seu DOM pode diferir da fonte mostrada aqui; esta ferramenta espera marcação explícita e balanceada.
Verifique o resultado
Cole um componente com tags de abertura e fechamento explícitas quando o aninhamento for difícil de ver. Inspecione as posições resultantes de pai e irmão e, em seguida, renderize o componente para verificar o espaçamento do texto. Tags de fechamento opcionais e scripts ou corpos de estilo precisam de um analisador HTML completo; este formatador intencionalmente não adivinha como um navegador repara marcação incompleta. Mantenha o original ao lado da saída e teste um pequeno exemplo conhecido antes de manipular um documento grande. Compare conteúdo significativo, não apenas o tamanho do arquivo ou o número de linhas. Verifique nomes, strings entre aspas, caracteres não ASCII, terminações de linha e quaisquer campos repetidos após a transformação.
HTML — Entrada
Ler e transformar estrutura
HTML — Resultado
Explorar guias