Como funciona
Organiza e reindenta documentos HTML para que a hierarquia de tags fique clara e consistente. É ideal para desaninhar marcação minificada, revisar templates alheios ou normalizar o estilo das suas views.
Além do tipo e tamanho de indentação e do fim de linha, permite controlar como os atributos são quebrados (por exemplo, um por linha) e o comprimento máximo da linha antes de quebrar, algo útil em tags com muitos atributos.
Tudo corre no seu navegador com o js-beautify e respeita o conteúdo de blocos como pre e textarea. Formata a apresentação; não valida o HTML nem fecha tags faltantes.
Exemplos
<ul><li><a href="/a">A</a></li><li>B</li></ul><ul>
<li><a href="/a">A</a></li>
<li>B</li>
</ul>Cada elemento aninhado passa para a sua própria linha com o recuo correspondente.Casos de uso
- Desaninhar e tornar legível marcação HTML minificada de uma página.
- Normalizar a indentação de templates antes de um commit.
- Controlar a quebra de atributos em tags com muitas propriedades.
- Revisar fragmentos de e-mail ou newsletters com tabelas aninhadas.
Perguntas frequentes
O que faz a opção de quebra de atributos?
Define como os atributos de uma tag são distribuídos: na mesma linha, forçados um por linha ou alinhados. É útil quando um elemento tem muitos atributos e você quer melhorar a legibilidade.
O conteúdo de pre ou textarea é quebrado?
Não. O formatador respeita o conteúdo de tags como pre e textarea, onde espaços e quebras são significativos, e não os reindenta.
Valida ou corrige o HTML?
Não. Só reorganiza a indentação e as quebras de linha. Não verifica se as tags estão bem fechadas nem corrige erros de marcação.
Meu código é enviado a um servidor?
Não. A formatação ocorre inteiramente no seu navegador; o HTML nunca sai do seu computador.