Formatador HTML
Recuado para ler, ou espremido para publicar.
Os exemplos substituem temporariamente os dados e as configurações. Você pode restaurar seu trabalho anterior.
Cole ou digite acima para ver o resultado aqui.
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. O que você cola é processado no seu dispositivo e nunca é enviado a um servidor, então é seguro usar com tokens, chaves e textos não publicados.
Exemplo
Receita de bolo de fubá de um blog, diagramada com recuo de 4 espaços
No blog de receitas da Cida, o post do bolo de fubá saiu do editor como uma linha de 314 caracteres: título, uma figura com foto e legenda e o modo de preparo numa lista numerada de 3 passos. Para conferir a temperatura do forno, ela cola o código com “diagramar” e recuo de 4 espaços.
- Saem 22 linhas. article, h2, figure, figcaption, ol e cada li ganham linhas próprias, e o texto de cada um fica um nível mais para dentro.
- A tag img da foto fica numa linha só, sem nada recuado embaixo: img não tem tag de fechamento.
- “Asse a 180 °C por 40 minutos.” continua numa linha só com o negrito no meio, e com os espaços dos dois lados.
- Com recuo de 2 espaços são as mesmas 22 linhas, com 411 caracteres em vez de 487.
| Opção | Linhas | Caracteres |
|---|---|---|
| Original | 1 | 314 |
| Diagramar, 4 espaços | 22 | 487 |
| Diagramar, 2 espaços | 22 | 411 |
| Comprimir (a partir dos 4 espaços) | 1 | 314 (36% a menos) |
O passo do forno aparece sozinho na sua linha e é fácil de achar. Depois da revisão, “comprimir” devolve a linha de 314 caracteres igual à original, pronta para colar de volta no editor.
Como funciona
- Cole o HTML. Ele é diagramado enquanto você digita.
- Mude para “comprimir” para tirar o recuo e os comentários.
- Escolha dois espaços, quatro, ou uma tabulação.
- Copie o resultado ou baixe como arquivo.
Perguntas frequentes
- O que acontece com um documento que não é bem válido?
- Ele é formatado mesmo assim. A marcação é lida como uma sequência de tags e texto, em vez de ser analisada numa árvore, porque o HTML que alguém quer formatar costuma ser justamente o que a pessoa está tentando entender.
- Ele vai estragar os espaços do meu texto?
- Não, e essa é a parte delicada. O espaço entre <b>um</b> e <i>dois</i> é renderizado, então é mantido; o espaço em volta de um <div> não é, então some. Elementos em linha ficam na linha junto com as palavras ao redor.
- Alguma coisa dentro de <pre> é tocada?
- Nenhum caractere. Todo espaço dentro de <pre> e <textarea> é renderizado, então o conteúdo sai exatamente como foi digitado — nem sequer deslocado para a esquerda.
- Comprimir muda algum nome?
- Não. Tira os comentários e os espaços que não aparecem. Nada é renomeado nem reordenado, e o documento que sai é exibido igual ao que entrou.
- Ele também comprime o CSS e o JavaScript dentro de <style> e <script>?
- Não. Só saem os espaços do começo e do fim do código; os espaços e quebras de linha de dentro ficam como foram digitados, então um <style> escrito em duas linhas sai em duas linhas. Para reduzir o código em si, passe-o antes pelo Formatador CSS ou pelo Minificador JavaScript.
- Alguma coisa é enviada para um servidor?
- Não. Roda no navegador, então o que você colar fica no seu computador.