TanodTools
PT

Formatar HTML

Cole HTML bagunçado ou minificado e receba-o de volta indentado, com scripts e estilos inline organizados também.

Funciona inteiramente no seu navegador

Indentação
Conteúdo

Entrada de até cerca de 10 MB. Ele reindenta o código e nunca o rejeita, então não avisa se o HTML for inválido.

Como formatar HTML

  1. Cole seu HTML na caixa ou clique em Inserir exemplo.
  2. Escolha a indentação, um limite de quebra de linha se quiser, e se os <script> e <style> inline devem ser formatados.
  3. A versão organizada aparece abaixo enquanto você digita. Copie ou baixe como arquivo .html.

Como indentar HTML com segurança

Os navegadores ignoram quase todo espaço em branco no HTML, então uma página pode estar escrita numa linha ou espalhada por mil e ser exibida igual. Templates, saídas de CMS e bundles minificados muitas vezes geram um código que ninguém consegue ler. Formatar o HTML coloca os elementos de bloco em linhas próprias e indenta os filhos sob os pais, o que torna fácil ver tags trocadas ou fora do lugar.

É nos detalhes que os formatadores erram. Elementos vazios como <br>, <img> e <input> nunca têm tag de fechamento, então não podem aumentar a indentação. O espaço em branco dentro de <pre> e <textarea> é exibido como foi digitado, então não pode ser tocado. E os elementos inline dividem a linha com as palavras em volta, porque uma quebra de linha ali acrescentaria um espaço visível.

Scripts e folhas de estilo incorporados na página são outra linguagem. O formatador pode organizá-los com a mesma indentação da página ou deixá-los literalmente como estão, se você preferir manter um diff pequeno ou se o código já foi minificado de propósito.

Dicas

Perguntas frequentes

Meu HTML é enviado para algum lugar?

Não. A biblioteca de formatação é carregada deste site na primeira vez que você cola algo, e o código é processado só no seu navegador.

Ele muda a aparência da página?

Ele muda os espaços em branco entre as tags, que os navegadores quase sempre ignoram, então a página deve continuar igual. A exceção é o espaço em branco visível: o texto dentro de <pre> e <textarea> fica exatamente como foi digitado por esse motivo.

Ele avisa se o meu HTML estiver quebrado?

Não. Ele formata de forma tolerante e não rejeita nada, então uma tag não fechada não gera erro; a indentação simplesmente segue o que encontra. Para encontrar erros de estrutura, passe a página por um validador.

E o JavaScript e o CSS dentro da página?

Por padrão, o conteúdo de <script> e <style> é formatado com a mesma indentação. Desmarque Formatar script e style inline para deixá-los exatamente como foram escritos.

Como tags inline como span e a são tratadas?

Os elementos inline ficam na mesma linha do texto quando cabem, então uma frase com <strong> não é quebrada em linhas separadas, o que acrescentaria espaços visíveis.

O que faz Quebrar linhas longas?

Com um limite definido, o texto que passa do limite é quebrado numa nova linha entre palavras. Desativado, cada trecho de texto fica numa linha só, por mais longo que seja.