Formatador de HTML

Tenha HTML legível e recuado de forma consistente a partir de código minificado.

Roda no seu navegador
Sem uploads
Sem conta

Carregando a ferramenta no navegador…

O que faz: Formatador de HTML

Templates minificados, HTML de e-mail e código copiado das ferramentas de desenvolvedor do navegador muitas vezes chegam numa única linha longa. Cole aqui e cada elemento de bloco vai para uma linha própria, recuado sob o elemento pai, para você ver a estrutura, revisar um diff ou achar onde o aninhamento dá errado.

Elementos curtos, como um item de lista com um único link, ficam numa linha só, e tags inline dentro de um parágrafo continuam no fluxo do texto. Escolha 2 espaços, 4 espaços ou Tabulação em Recuar com para combinar com o seu projeto.

Exemplo

Entrada

<nav><ul><li><a href="/">Início</a></li><li><a href="/docs/">Documentação</a></li></ul></nav><p>Olá, <em>pessoal</em></p>

Resultado

<nav>
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/docs/">Documentação</a></li>
  </ul>
</nav>
<p>Olá, <em>pessoal</em></p>

O nav e o ul ganham linhas próprias, enquanto cada item de lista e o parágrafo ficam numa linha só porque têm apenas conteúdo inline.

Como usar: Formatador de HTML

Cole o HTML na caixa HTML, ou clique em Abrir arquivo.
Escolha 2 espaços, 4 espaços ou Tabulação em Recuar com.
Clique em Copiar ou Baixar .html.

Bom saber

Ele formata, mas não valida. Tags de fechamento ausentes não são apontadas; elas aparecem como aninhamento inesperado no resultado recuado.
Sequências de espaços e quebras de linha dentro do texto comum viram espaços simples, do jeito que o navegador as exibe.
Não há opção de minificar. Para reduzir o HTML em produção, use o minificador da sua ferramenta de build.
Para também remover estilos, classes ou tags inseguras, use o Limpador de HTML.

Perguntas sobre Formatador de HTML

Como formato HTML online?

Cole o HTML na caixa e a versão formatada aparece na hora. Escolha o recuo e depois copie ou baixe como arquivo .html.

Formatar o HTML pode mudar a aparência da página?

Raramente. Os navegadores ignoram espaços em branco entre elementos de bloco. A exceção são elementos inline ou inline-block lado a lado, em que uma quebra de linha entre eles pode criar um pequeno espaço visível.

Devo recuar HTML com 2 ou 4 espaços?

Dois espaços é a escolha mais comum para HTML, porque o código se aninha bastante e as linhas crescem rápido. Quatro espaços ou tabulações servem se o seu projeto já os usa; a consistência importa mais que o número.

Ele formata templates de e-mail em HTML?

Sim. O código de e-mail cheio de tabelas fica muito mais fácil de acompanhar com cada tabela, linha e célula numa linha própria, e os estilos inline de que os clientes de e-mail dependem ficam como foram escritos.