Formatador HTML

Para que serve um formatador HTML

O HTML muitas vezes chega em um estado difícil de ler. A exportação de um CMS coloca uma página inteira em uma linha. Um mecanismo de templates deixa vãos estranhos. Copiar do código-fonte no navegador traz o que o servidor mandou, do jeito que veio. Um formatador HTML reconstrói o recuo (a indentação) para que cada elemento aninhado fique um nível mais para dentro que o pai, e você enxerga a estrutura da página de relance.

Esta página usa o Prettier 3 no seu navegador. Além da marcação, ela também formata o CSS dentro das tags style e o JavaScript dentro das tags script, então uma página inteira sai organizada em uma única passada.

Como usar

1. Cole seu HTML na caixa da esquerda. A formatação começa assim que você cola.
2. Ou clique em Abrir arquivo para carregar um arquivo .html, ou em Exemplo para testar com um exemplo.
3. Escolha o Recuo: 2 espaços, 4 espaços ou tabulações.
4. Defina a Largura da linha. Linhas com muitos atributos ou com texto longo quebram nessa largura.
5. Escolha um modo de Espaços em branco: Respeitar o display do CSS, Ignorar ou Estrito. O padrão é o seguro.
6. Clique em Formatar ou use Ctrl+Enter. Clique em Minificar para a versão compacta.
7. Clique em Copiar, ou em Baixar para salvar um arquivo .html.

Depois que o formatador roda uma vez, ele atualiza o resultado enquanto você digita. Se um bloco de script ou de style dentro da página tiver um erro de sintaxe, esse bloco fica como você escreveu e o resto da página é formatado mesmo assim. Para encontrar o erro, cole o script no formatador JavaScript, que informa a linha e a coluna.

Antes e depois

Uma linha de HTML:

<!DOCTYPE html><html><head><title>Shop</title></head><body><nav><a href="/">Home</a><a href="/cart">Cart</a></nav><main><h1>Welcome</h1><p>Pick a <b>product</b> to start.</p><ul><li>Tea</li><li>Coffee</li></ul></main></body></html>

Depois de Formatar com 2 espaços:

<!DOCTYPE html>
<html>
  <head>
    <title>Shop</title>
  </head>
  <body>
    <nav><a href="/">Home</a><a href="/cart">Cart</a></nav>
    <main>
      <h1>Welcome</h1>
      <p>Pick a <b>product</b> to start.</p>
      <ul>
        <li>Tea</li>
        <li>Coffee</li>
      </ul>
    </main>
  </body>
</html>

Os dois links do nav continuam na mesma linha. Não há espaço entre eles no código original, e acrescentar uma quebra de linha colocaria um vão visível entre os dois. É o modo Respeitar o display do CSS funcionando.

Os blocos embutidos são formatados com as regras deles:

<style>
  body {
    margin: 0;
  }
</style>
<script>
  const a = 1;
  console.log(a);
</script>

A opção Espaços em branco

No HTML, uma quebra de linha entre dois elementos em linha aparece como um espaço. É por isso que os formatadores precisam ter cuidado. Este é o mesmo parágrafo com uma largura de linha de 40.

Com Respeitar o display do CSS:

<p>
  Read the <a href="/terms">terms</a>,
  then press <button>Accept</button>.
</p>

Com Ignorar:

<p>
  Read the
  <a href="/terms">terms</a>
  , then press
  <button>Accept</button>
  .
</p>

A segunda versão parece organizada, mas agora o navegador mostra um espaço antes da vírgula e antes do ponto final. Use Ignorar só em marcações em que isso não importa, como templates de e-mail que você confere a olho, ou HTML com cara de XML e sem texto em linha.

Minificar HTML

Minificar encolhe a página sem mudar o que ela mostra. Para esta entrada:

<div class="card">
  <!-- price -->
  <p>
    Only   <b>$5</b>   today
  </p>
</div>

o resultado é:

<div class="card"><p>Only <b>$5</b> today</p></div>

Os comentários são removidos, os espaços repetidos viram um só e os espaços ao lado de elementos de bloco como div e p somem. Os espaços entre palavras em linha ficam, porque removê-los juntaria as palavras. O conteúdo de pre, textarea e script fica intacto, e o CSS das tags style é minificado com as mesmas regras seguras do formatador CSS.

Limites

• O HTML é tolerante, então uma tag de fechamento faltando muitas vezes não é um erro. A entrada <div><p>Hello</div> volta como <div><p>Hello</p></div>, com o parágrafo fechado para você. Observe o resultado para descobrir as tags que você esqueceu.
• A formatação não valida atributos, não verifica acessibilidade e não corrige aninhamentos inválidos. Use o validador do W3C para isso.
• Sintaxes de template como Handlebars ou Jinja podem confundir o parser. Formate o HTML já renderizado, ou use um formatador feito para aquela linguagem de template.

Outras formas de formatar HTML

• O VS Code tem um formatador de HTML embutido. Use Formatar Documento (Shift+Alt+F no Windows, Shift+Option+F no macOS). A extensão do Prettier dá um resultado igual ao desta página.
• Linha de comando: npx prettier --write index.html.
• As ferramentas de desenvolvedor do navegador mostram uma árvore DOM formatada no painel Elements, mas essa é a página ao vivo depois que os scripts rodaram, e não o seu código-fonte.

Se você precisa do conteúdo de uma página em Markdown, e não em HTML, a ferramenta de converter HTML para Markdown faz isso. Para scripts fora da página, use o formatador JavaScript.