Formatador HTML
Indente um documento HTML sem mudar como ele é renderizado, inteiramente no seu navegador.
Roda inteiramente no seu navegador. Nada é enviado, registrado ou armazenado.
Cole uma página minificada ou mal indentada e leia-a direito. A formatação acontece no seu navegador, e o documento que sai é renderizado exatamente como o que entrou.
Como funciona
O documento é lido para dentro de uma árvore — que é onde os elementos vazios, o conteúdo de script e style e as tags de fechamento opcionais do HTML são resolvidos — e depois reescrito com nova indentação.
Onde as linhas caem é decidido por como um navegador lê espaço em branco, e não pelo que parece arrumado. Qualquer sequência de espaço em branco é renderizada como um único espaço, então transformar um espaço em uma quebra de linha com indentação não muda nada. Criar um onde não havia, sim: é o que transforma dois elementos inline adjacentes em dois separados por um espaço.
Então o espaço em branco só é acrescentado ou removido entre caixas de nível de bloco e nas bordas de uma delas, onde um navegador não renderiza nada dele. É essa a exceção que permite abrir uma página minificada, e é também por isso que uma sequência de elementos inline fica na linha em que estava.
Uma tag de que o formatador nunca ouviu falar é tratada como inline, porque essa é a resposta que não acrescenta espaço em branco e, portanto, não pode mudar a página.
Exemplos
| Caso | Entrada | Resultado |
|---|---|---|
| Uma lista sem indentação | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
Perguntas frequentes
A minha página é enviada para algum lugar?
Não. O formatador é JavaScript rodando nesta página. Nada é enviado, nada é registrado e nada é armazenado — você pode desligar a sua conexão de rede e a ferramenta continua funcionando.
Por que os meus elementos inline ficaram na mesma linha?
Porque movê-los mudaria a sua página. O espaço em branco entre duas caixas inline é renderizado como um espaço, então colocar <span>a</span><span>b</span> em duas linhas insere entre eles um vão que não existia. A maioria dos formatadores faz isso mesmo assim; este não faz.
Ele fecha as minhas tags abertas?
Não. Ele entende que um segundo item de lista fecha o primeiro, então indenta a sua lista corretamente, mas reescreve as tags que você escreveu. Acrescentar uma tag de fechamento seria editar a sua marcação em vez de diagramá-la, e nem sempre é óbvio onde exatamente ela deveria ir.
Ele valida o HTML?
Não. Ele não tem esquema, nem regras sobre qual elemento pode conter qual, nem opinião sobre os seus atributos. As únicas coisas que ele recusa são uma tag, um comentário ou um bloco de script que nunca fecham, porque a partir dali ele não consegue mais distinguir marcação de texto.
O que acontece com os meus scripts e estilos?
Eles voltam byte por byte. Dentro de um script, um < é um sinal de menor que, e não o começo de uma tag, e dentro de um <pre> ou de um <textarea> cada espaço é seu. Esses quatro elementos ficam exatamente como estavam. Se você quer o script ou a folha de estilos em si formatados, o formatador CSS está ao lado.
Bom saber
- O documento que sai é renderizado igual ao que entrou. Isso é garantido pelos testes sobre um corpus, e não deixado à inspeção.
- Nada é inventado: nenhuma tag de fechamento é acrescentada, nenhum atributo é recolocado entre aspas, nenhuma entidade é decodificada e nenhum nome de tag muda de caixa. Só o espaçamento entre atributos muda, porque ele nunca é renderizado.
- A largura de quebra decide se um elemento com conteúdo inline fica em uma linha ou se abre, de modo que um parágrafo curto se lê como uma linha e um longo é quebrado em espaços que ele já tinha.
Fontes
Todas as ferramentas de Código