Logotipo GigaCode GigaCode

Ferramentas para desenvolvedores, rápidas e locais, porque sua privacidade importa.

Gerador de QR Code Gerador de CPF e CNPJ JSON Formatter e Validator Gerador de lero-lero JWT Decoder SQL Formatter Diff de texto Conversor de Unidades de CSS Base64 Encoder e Decoder Conversor de SVG para PNG ou JPEG Conversor JPG/PNG ↔ WebP Redimensionador de imagem Filtro de escala de cinza

Beautifier HTML

Formate HTML minificado/desorganizado para facilitar leitura e manutenção.

Descrição

HTML é, em essência, o documento mais lido do mundo — não por pessoas, mas por máquinas. Tim Berners-Lee criou o HTML em 1991 como subconjunto do SGML (Standard Generalized Markup Language), o padrão de marcação de documentos científicos que o CERN utilizava. A ideia era simples: um conjunto de tags para conectar artigos de física via hyperlinks. O que aconteceu nos trinta anos seguintes foi que esse mesmo formato foi sendo empurrado para uso muito além do que seus criadores imaginaram, até virar a estrutura de interfaces tão complexas quanto editores de texto online, planilhas no navegador e ferramentas de design colaborativo.

O problema do HTML ilegível não é culpa do desenvolvedor que escreveu o template original. Ferramentas de geração de HTML — CMS como WordPress, exportadores de Figma, geradores de e-mail HTML, bibliotecas de componentes — produzem marcação funcionalmente perfeita que o browser parseia sem reclamar. Mas são uma linha contínua de 8.000 caracteres onde um `</div>` pode ser o décimo da fila e você não tem como saber qual é pai de qual sem um parser de apoio.

O beautifier HTML resolve exatamente isso: usa um parser real (não regex) para analisar a árvore de tags, calcula os níveis de aninhamento e adiciona indentação e quebras de linha consistentes. O parser pode normalizar alguns fragmentos conforme as regras do HTML5 — o que significa que o output pode ser ligeiramente diferente do input para markup malformado. Não é um validador: para verificar conformidade formal com a especificação, o W3C Markup Validator é a ferramenta certa. Para tornar um template ilegível em algo que um ser humano consegue ler e manter, o beautifier faz exatamente o trabalho.

Detalhamento técnico

HTML, SGML e a herança dos anos 90: por que o formato ainda é relevante

  • O HTML foi criado como subconjunto do SGML (Standard Generalized Markup Language), o padrão ISO de marcação de documentos que organizações científicas como o CERN usavam desde os anos 80. Berners-Lee simplificou o SGML para criar algo que qualquer pessoa pudesse aprender em horas — e funcionou tão bem que nunca foi substituído.
  • A primeira especificação HTML (1993) tinha apenas 18 elementos. O HTML5, a versão atual, tem mais de 100. Ao longo das décadas, a linguagem acumulou elementos semânticos como `<article>`, `<section>`, `<nav>` e `<main>` que ajudam mecanismos de busca e leitores de tela a entender a estrutura do documento.
  • Os parsers HTML são intencionalmente tolerantes a erros. Isso é uma decisão de design, não um bug: nos anos 90, exigir HTML perfeito teria tornado a web inacessível para a maioria das pessoas. Até hoje, um browser consegue renderizar HTML com tags não fechadas, atributos sem aspas e aninhamentos incorretos.
  • O DOCTYPE `<!DOCTYPE html>` no início do documento instrui o browser a usar o modo de padrões (standards mode) em vez do modo quirks. O modo quirks é uma emulação de comportamentos de browsers antigos dos anos 90 que permanece ativo quando o DOCTYPE está ausente.
  • O WHATWG (Web Hypertext Application Technology Working Group) mantém o HTML como um 'living standard' — uma especificação em constante evolução sem números de versão. HTML5 é o nome coloquial para as melhorias feitas a partir de 2008; tecnicamente não existe um 'HTML6'.

Quando usar beautifier, quando usar validador e quando usar linter

  • O beautifier reformata o HTML sem alterar semântica nem verificar correção. Ele adiciona indentação, quebras de linha e consistência visual. É útil para depuração, revisão de código e leitura de templates gerados por máquina.
  • O W3C Markup Validator (validator.w3.org) verifica conformidade estrutural com a especificação HTML5: detecta tags não fechadas, aninhamentos ilegais, atributos obrigatórios ausentes e elementos obsoletos. Use antes de publicar páginas que precisam de acessibilidade e SEO corretos.
  • Linters HTML como HTMLHint vão além da sintaxe: alertam sobre `<img>` sem `alt`, ausência do atributo `lang` na tag `<html>`, ordem incorreta de headings (h1 → h2 → h3), atributos descontinuados. São ideais para integração em pipelines de CI.
  • Prettier é o formatador multi-linguagem mais adotado da indústria e inclui suporte a HTML. Integra com VS Code, Neovim, WebStorm e a maioria dos editores, além de rodar como pré-hook de commit via Husky. Para projetos com time, Prettier elimina debates de estilo de código.
  • O beautifier desta página usa uma abordagem baseada em DOM: o HTML é parseado pelo motor do browser, e a árvore resultante é serializada com indentação. Isso significa que pode normalizar alguns fragmentos conforme as regras de parsing do HTML5 — útil para entender o que o browser realmente interpreta.

Guia da ferramenta

  • O que faz Formata HTML minificado para estrutura hierárquica legível.

  • Quando usar Revisar templates e depurar marcação sem precisar ajustar manualmente linha por linha.

Este capítulo no guia completo Guia de todas as ferramentas

Exemplo de Código

Antes e depois do beautifier HTML
<!-- ANTES: markup gerado por CMS, sem indentação -->
<main><section class="hero"><h1>Título</h1><p>Parágrafo com <strong>negrito</strong> e <a href="/link">link</a>.</p></section><section class="cards"><article><h2>Card</h2><p>Texto do card.</p></article></section></main>

<!-- DEPOIS: beautificado com 2 espaços de indentação -->
<main>
  <section class="hero">
    <h1>Título</h1>
    <p>Parágrafo com <strong>negrito</strong> e <a href="/link">link</a>.</p>
  </section>
  <section class="cards">
    <article>
      <h2>Card</h2>
      <p>Texto do card.</p>
    </article>
  </section>
</main>
Formatar HTML com Prettier (Node.js)
import prettier from 'prettier';
import htmlPlugin from 'prettier/plugins/html';

const html = '<main><section><h1>Título</h1><p>Texto</p></section></main>';

const formatado = await prettier.format(html, {
  parser: 'html',
  plugins: [htmlPlugin],
  printWidth: 80,
  tabWidth: 2,
  htmlWhitespaceSensitivity: 'css',
});

console.log(formatado);

// Configuração no VS Code (settings.json):
// "[html]": {
//   "editor.defaultFormatter": "esbenp.prettier-vscode",
//   "editor.formatOnSave": true
// }

Entrada comum 

<main><section><h1>Título</h1><p>Texto</p></section></main>

Perguntas frequentes

Para que serve esta ferramenta?

Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.

Meus dados são enviados a algum servidor?

O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.

Posso usar em produção ou para dados reais?

Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.

FAQ geral do GigaCode