Por que algumas tags ficam na mesma linha?

Porque separá-las mudaria a página. ` a b ` aparece como “ab”; ponha uma quebra de linha entre as duas e o navegador mostra “a b”. O espaço entre dois elementos em linha é conteúdo: por isso o formatador indenta em volta dos elementos de bloco e deixa em paz as sequências em linha. O minificador HTML deste site aplica a mesma regra ao contrário.

O meu bloco ` ` é reindentado?

Não. Dentro de um ` `, cada espaço e cada quebra aparece como está escrito, então mexer neles reescreveria o que os seus visitantes veem. O mesmo vale para ` `, cujo conteúdo é o valor do campo, e para ` ` e ` `, cujo conteúdo não é HTML.

Ele conserta HTML quebrado?

Não: é um formatador, nem validador nem ferramenta de conserto. ` x ` volta indentado com o ` ` ainda aberto: a ferramenta diagrama o que lê em vez de adivinhar o que você queria dizer. Um resultado arrumado não diz nada sobre como o documento será analisado.

Formatador HTML — leia o código de uma página

Reindente HTML. Os elementos em linha guardam a linha deles, porque uma quebra entre eles é um espaço na tela: o código se lê e a página não se mexe.

Instantâneo Privado Zero cookies

Indentação

Entrada HTML

Saída HTML

O que esta ferramenta faz

HTML minificado ou mal indentado vira HTML legível.

<ul><li>a</li><li>b</li></ul>

<ul>
  <li>a</li>
  <li>b</li>
</ul>

Um nível de indentação por nível de aninhamento, dois espaços por padrão e quatro se você preferir. Nomes de tags, atributos e a ordem deles não são tocados: isto é diagramação, não reescrita.

Uma quebra de linha não sai de graça

<p>Olá <b>mundo</b> de novo</p>

Isso fica numa linha só. Em HTML, o espaço entre dois elementos em linha faz parte do texto: quebre a linha entre </b> e de e você acrescentou um espaço — visível na renderização, numa seleção, num copiar e colar. Por isso o formatador indenta em volta dos elementos de bloco (div, p, ul, table…) e deixa intactas as sequências de conteúdo em linha, por mais longas que fiquem.

É a mesma regra que o minificador HTML aplica no outro sentido, e pelo mesmo motivo: nada que mude a página renderizada conta como formatação.

No que ele nunca mexe

<pre> e <textarea>. Os espaços deles aparecem exatamente como escritos — reindentar reescreveria a página e o valor do campo.
<script> e <style>. O conteúdo deles é JavaScript e CSS, não HTML; para isso existem os formatadores de JavaScript e CSS deste site.
Os seus atributos. Nomes, valores, aspas e ordem saem como entraram, espaços dentro de um valor incluídos.

Não é um validador

<div><p>x</div>

<div>
  <p>x
</div>

O <p> sem fechar volta sem fechar. Um formatador lê o documento que você dá e diagrama; adivinhar onde uma tag deveria fechar seria reescrever a sua marcação no palpite. Para saber se um documento é bem formado, use um validador — o do W3C — ou as ferramentas de desenvolvimento do navegador, que mostram a árvore que o analisador construiu de fato.

Privado por padrão

Tudo é executado localmente no seu navegador com JavaScript. Os seus dados nunca são enviados para um servidor, o que torna a ferramenta segura para conteúdo sensível e funciona offline.

Perguntas frequentes

Por que algumas tags ficam na mesma linha?: Porque separá-las mudaria a página. `<span>a</span><span>b</span>` aparece como “ab”; ponha uma quebra de linha entre as duas e o navegador mostra “a b”. O espaço entre dois elementos em linha é conteúdo: por isso o formatador indenta em volta dos elementos de bloco e deixa em paz as sequências em linha. O minificador HTML deste site aplica a mesma regra ao contrário.
O meu bloco `<pre>` é reindentado?: Não. Dentro de um `<pre>`, cada espaço e cada quebra aparece como está escrito, então mexer neles reescreveria o que os seus visitantes veem. O mesmo vale para `<textarea>`, cujo conteúdo é o valor do campo, e para `<script>` e `<style>`, cujo conteúdo não é HTML.
Ele conserta HTML quebrado?: Não: é um formatador, nem validador nem ferramenta de conserto. `<div><p>x</div>` volta indentado com o `<p>` ainda aberto: a ferramenta diagrama o que lê em vez de adivinhar o que você queria dizer. Um resultado arrumado não diz nada sobre como o documento será analisado.