Formatador de HTML online

O formatador de HTML reescreve um HTML com indentação consistente e quebras de linha na largura escolhida, deixando a estrutura da página fácil de ler. O CSS dentro de <style> também é formatado. Se houver uma tag mal fechada, a ferramenta mostra a linha e a coluna. Tudo roda no seu navegador, sem enviar o código a nenhum servidor.

Atualizado em · Por Leonardo Gaertner

A formatação é feita no seu navegador. O código e os arquivos não são enviados a nenhum servidor.

Achou um resultado errado ou tem uma sugestão? Avise por e-mail.

Como usar

  1. Cole o HTML no campo da esquerda, ou clique em Abrir arquivo.
  2. Escolha a indentação (2 espaços, 4 espaços ou tabulação) e a largura da linha.
  3. Clique em Copiar resultado ou em Baixar arquivo.

Como funciona

A formatação usa o Prettier. Cada elemento de bloco vai para sua linha, com os filhos indentados, e o texto é reorganizado para caber na largura escolhida. Elementos que ficam na mesma linha do texto, como <b>, <a> e <span>, são tratados com cuidado para que o espaço entre eles, que aparece na página, não seja perdido.

O conteúdo de <pre> e <textarea> é mantido exatamente como está, e o CSS dentro de <style> é formatado. O JavaScript dentro de <script> não é reformatado: ele é apenas indentado como um bloco, sem mudar o código.

A ferramenta aponta erros de estrutura, como uma tag de abertura sem terminar ou uma tag de fechamento sem correspondência. Ela aceita o que o HTML permite, como o fechamento opcional de <p> e <li>, e não confere se o documento segue todas as regras da especificação.

Exemplo

Entrada: <div class="card"><h2>Título</h2><p>Texto</p></div>

Saída:

<div class="card">

<h2>Título</h2>

<p>Texto</p>

</div>

Fonte: Prettier: opções de formatação; MDN: HTML

Perguntas frequentes

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

Não deve. Só os espaços e as quebras de linha mudam, e a ferramenta preserva os espaços que fazem diferença na página, como os que ficam entre elementos na mesma linha e o conteúdo de <pre>.

Por que o meu <script> não foi formatado?

O JavaScript dentro do HTML é mantido como está, para não arriscar mudar o código. Se quiser formatá-lo, use uma ferramenta específica para JavaScript. O CSS dentro de <style> é formatado normalmente.

O que significa "Unexpected closing tag"?

Que há uma tag de fechamento sem uma abertura correspondente, ou que ela aparece fora de ordem, por exemplo </span> dentro de um <div> que não abriu um <span>. A linha e a coluna indicam onde olhar.

Para que serve a largura da linha?

Ela define o comprimento máximo das linhas de texto e de atributos antes de a ferramenta quebrar para a linha seguinte. Valores de 80 a 120 são os mais usados.

Outras ferramentas que podem ajudar

Ver tudo em JSON, dados e formatadores