Formatador e embelezador HTML gratuito

O que é a formatação HTML ?

Formatação HTML (também chamada de «beautification» ou «pretty-printing») é o inverso de minificação. Um formatador pega HTML em qualquer forma, saída de produção minificada, copiada e colada do inspetor de um navegador, gerada por um motor de templates, ou simplesmente escrita à mão de forma bagunçada, e a re-emite com indentação consistente, quebras de linha entre elementos de bloco e uma estrutura visual previsível. Navegadores ignoram o espaço em branco extra em tempo de parse, então a formatação muda como a fonte se vê mas nunca como a página renderiza. Por que se importar? Porque olhos humanos fazem parse de hierarquia indentada mais rápido que de sopa de tags visualmente plana. Revisão de código, depuração, aprendizado de estrutura HTML, entrega de markup a outro desenvolvedor, comparação de duas versões por mudanças, tudo fica substancialmente mais fácil quando a árvore do documento é visualmente óbvia a partir da indentação.

Os cinco fluxos de trabalho do mundo real onde um formatador ganha seu lugar: (1) HTML de produção minificado colado do «Exibir fonte» de um navegador ou «Copiar HTML externo» do DevTools de volta a um depurador; (2) HTML extraído de um textarea de CMS onde o editor WYSIWYG produziu uma saída visualmente limpa mas uma fonte bagunçada; (3) depuração de saída de motor de templates (Jinja, Twig, Handlebars, ERB) onde o HTML renderizado não coincide com o que você esperava; (4) conversão de HTML auto-gerado (de renderização do lado servidor React, Pandoc, conversores de documentos) em uma forma legível para revisão de código; (5) limpar HTML de template de e-mail antes de submetê-lo a uma plataforma de marketing que possa retirar sua formatação na importação.

Os principais formatadores HTML

js-beautify (Einar Lielmanis, a partir de 2007) é o formatador de longa data do ecossistema JavaScript, lida com HTML, CSS, JavaScript e JSON com uma única biblioteca. O formatador HTML é o que alimenta a face pública do beautifier.io e o que historicamente sustentou dezenas de sites «format HTML online». Prettier (James Long, 2017) é o formatador opinativo que veio a dominar o ecossistema frontend moderno; o suporte HTML chegou pouco depois do lançamento. A filosofia de design do Prettier é «quase sem configuração», um estilo de indentação (2 espaços por padrão), um alvo de largura de linha (printWidth: 80), um conjunto de regras de envolvimento de atributos. O trade-off é consistência entre equipes sem bikeshedding; o custo é menos flexibilidade pessoal. HTML Tidy (Dave Raggett no W3C em 1997, agora mantido pelo HTACG) é o original, antecede a cena moderna de formatadores web e foi originalmente projetado para limpar HTML antigo, quebrado e obsoleto do final dos anos 90. O Tidy ainda vem no macOS por padrão (/usr/bin/tidy) e na maioria das distribuições Linux; menos comumente usado em 2026 mas ainda respeitado por seu rigor. Em um fluxo de trabalho moderno, Prettier é o padrão para novos projetos, integrado no VS Code (formatador padrão para arquivos HTML), IDEs JetBrains, e hooks de pré-commit via Husky + lint-staged. Esta ferramenta é para os casos onde você não tem um pipeline de build executando o Prettier, colar, formatar, copiar.

Convenções de indentação

Três estilos de indentação competem no HTML moderno. 2 espaços é o padrão web moderno, usado pelo HTML/CSS Style Guide do GitHub, o Google HTML/CSS Style Guide, o padrão do Prettier, os exemplos de estilo WHATWG e a maioria dos pacotes front-end publicados no npm. O argumento: HTML aninha profundamente (um componente típico pode ter 6-10 níveis de indentação), e 2 espaços impedem que as linhas saiam pelo lado direito de um display de 80 colunas. 4 espaços é a antiga tradição Java / Microsoft que sobrevive em alguns projetos legados e no padrão PHP PSR-12; produz uma hierarquia visualmente mais clara ao custo de espaço horizontal. As tabulações são favorecidas pela comunidade do kernel Linux, alguns projetos Go, e desenvolvedores que argumentam que caracteres tab deixam cada visualizador definir sua própria preferência de largura visual. O argumento «tabs vs espaços» é mais velho que a maioria dos leitores e não há como vencer; a resposta prática é escolher um por projeto e deixar seu formatador impô-lo. Esta ferramenta oferece os três.

Elementos inline vs bloco, a armadilha do espaço em branco

A maior pegadinha na formatação HTML é a distinção entre elementos de nível bloco e inline. Elementos de bloco (<div>, <p>, <section>, <article>, <ul>) fluem como blocos estilo parágrafo; o espaço em branco entre eles é renderizado como nada visível, então um formatador pode livremente adicionar quebras de linha e indentação ao redor deles. Elementos inline (<span>, <a>, <strong>, <em>, <code>) fluem dentro do texto; o espaço em branco entre eles É renderizado. Considere <p>Hello <strong>world</strong>!</p>: o espaço entre «Hello» e a abertura de <strong> é um caractere de espaço real que aparecerá entre as palavras. Se um formatador ingênuo quebra essa linha e indenta <strong> em sua própria linha, a saída renderizada silenciosamente ganha espaço em branco visível e agora pode ler «Hello world» com um espaço extra. Pior, formatadores que removem espaço em branco entre elementos inline podem fundir palavras adjacentes: «Helloworld» sem espaço. A opção «preservar tags inline» (padrão ligada aqui) diz ao formatador para manter elementos inline na mesma linha que o texto que os cerca, o comportamento seguro para a maioria do HTML do mundo real.

Conteúdo protegido, pre, textarea, script, style

Quatro elementos HTML têm conteúdo com espaço em branco significativo que não deve ser reformatado: <pre> exibe texto exatamente como escrito, incluindo quebras de linha e espaços; o conteúdo inicial de <textarea> sobrevive ao espaço em branco; <script> contém JavaScript cuja semântica depende de espaço em branco (ou pelo menos onde adicionar indent corromperia a fonte); <style> contém CSS que deveria ser reformatado por um formatador CSS-aware, não um HTML. Formatadores HTML de produção (Prettier, Tidy, js-beautify) detectam esses elementos e pulam o reformatado de seu conteúdo. Divulgação honesta para esta ferramenta: a implementação é feita à mão em vez de envolver uma biblioteca de produção, e o manuseio de inline-vs-bloco + conteúdo-protegido é conservador mas não perfeitamente tolerante a falhas. Se você passa HTML de produção pesado por ela e a saída parece errada dentro de um bloco <pre> ou quebra um script, a opção mais segura é usar o Prettier localmente (é uma instalação de um comando: npm install -g prettier, depois prettier --parser html input.html). Para HTML ordinário de template e a nível de componente, esta ferramenta lida com os casos comuns.

Convenções de atributos e tags auto-fechadas

Atributos HTML têm suas próprias escolhas de formatação. Listas curtas de atributos cabem em uma linha (<a href="/pt/about" class="link">); listas longas envolvem um por linha, frequentemente com o > de fechamento em sua própria linha. O padrão printWidth: 80 do Prettier dispara o envolvimento quando uma linha excederia 80 caracteres, que é a convenção moderna. Algumas equipes impõem ordem de atributos (class primeiro, depois id, depois data-*, depois ARIA, depois manipuladores de eventos); a maioria dos formatadores respeita a ordem existente em vez de reordenar, já que reordenar pode mudar comportamento em casos sutis (especificidade CSS, lookups de classes JavaScript). Tags auto-fechadas: HTML5 não exige a barra final em elementos void (<br>, <hr>, <img>, <input>, <meta>, <link>, há 14 elementos void no total em HTML5), mas XHTML e JSX sim (<br />). Formatadores ou preservam a barra se presente, removem-na (HTML5-clean), ou a adicionam (XHTML-friendly) dependendo da configuração. Esta ferramenta segue a entrada, se sua fonte usa <br />, a saída mantém; se você usa <br>, a saída mantém isso.

Casos de uso comuns

• Revisão de código · limpe o HTML antes de compartilhá-lo ou revisá-lo com colegas.
• Depuração · um código bem formatado facilita a detecção de tags ausentes ou de aninhamento incorreto.
• Limpeza de templates · reformate o HTML gerado por templates ou ferramentas de build.
• Transferência entre desenvolvedores · torne o código mais legível para outros desenvolvedores trabalhando no mesmo projeto.
• Aprendizagem · entenda melhor a estrutura HTML observando os padrões de indentação.
• Inspeção de templates de e-mail. Construtores de templates de e-mail (Mailchimp, ConvertKit) frequentemente produzem HTML com estilos inline que é difícil de ler; formatá-lo torna a estrutura visível antes de submeter mudanças.

O pipeline moderno, Prettier ao salvar

Para projetos com um pipeline de build, o padrão 2026 é Prettier rodando ao salvar no seu editor e em cada commit via um hook de pré-commit. VS Code traz o Prettier como formatador HTML padrão quando a extensão está instalada; dispare com Format Document (Shift+Alt+F no Windows/Linux, Shift+Option+F no macOS) ou ative "editor.formatOnSave": true nas configurações. IDEs JetBrains (WebStorm, IntelliJ) integram o Prettier via Settings → Languages & Frameworks → JavaScript → Prettier. Hooks de pré-commit via Husky + lint-staged rodam o Prettier em cada arquivo em staging antes de permitir o commit, garantindo que nenhum HTML sem formatação alcance o repositório. Checks de CI rodam prettier --check em pull requests para pegar deriva de formatação. Nada disso importa para snippets pontuais colados de outro lugar, é exatamente para isso que serve esta ferramenta in-browser. Para trabalho de projeto de longo prazo, configure o Prettier; a ferramenta in-browser é a opção sem fricção para tudo o mais.

Privacidade: por que só-navegador importa aqui

HTML frequentemente contém coisas que você não quer que um terceiro veja: templates de ferramentas admin internas, markup de páginas de produto não lançadas, variantes de testes A/B com hipóteses de experimentos reveladas em nomes de classes, templates de e-mail com conteúdo personalizado, dashboards de clientes com PII em placeholders. Formatadores do lado servidor sobem seu HTML a um serviço terceiro onde fica em logs. Esta ferramenta roda inteiramente no seu navegador via JavaScript, verifique na aba Network do DevTools ao clicar Format, ou coloque a página offline (modo avião) após carregar e o formatador continua funcionando. Segura para templates de produto não lançados, páginas admin internas, variantes A/B-test ou qualquer HTML que você não queira ver copiado no disco rígido de um desconhecido.

Perguntas frequentes

O que é o embelezamento HTML ?

O embelezamento HTML reformata seu código para torná-lo mais legível adicionando indentação e quebras de linha. Isso facilita muito a depuração e a edição, sem alterar a renderização do HTML nos navegadores.

A formatação altera a aparência do meu HTML em um navegador ?

Não. A formatação adiciona apenas espaços e indentação. Os navegadores ignoram espaços extras em HTML. Seu HTML formatado será exibido exatamente como o original.

O que são tags inline ?

As tags inline (como <span>, <a>, <strong>) encaixam-se no texto sem criar quebra de linha. A opção « preservar tags inline » impede que sejam colocadas em linhas separadas e as mantém com seu conteúdo.

2 espaços, 4 espaços ou tabulações?

2 espaços é o padrão web moderno, usado pelo GitHub, Google HTML/CSS Style Guide, Prettier, os exemplos de estilo WHATWG e a maioria dos pacotes npm. 4 espaços persiste nas antigas tradições Java / Microsoft / PHP. Tabulações são favorecidas pelo kernel Linux e alguns projetos Go. O argumento é mais velho que a maioria dos leitores e não há como vencer; a resposta prática é combinar o que seu projeto já usa (ou a convenção prevalente da equipe) e deixar um formatador impor. Para um snippet pontual sem contexto de projeto, 2 espaços é o padrão mais seguro em 2026.

Devo usar isso se já uso o Prettier?

Provavelmente não, a integração Prettier do seu editor está fazendo isso ao salvar, com plena consciência do AST HTML e o manuseio de conteúdo protegido que formatadores de produção requerem. Esta ferramenta é para os casos que seu pipeline de build não cobre: HTML colado de um inspetor de navegador, snippets de e-mail ou chat, saída de motor de templates que você quer inspecionar, formatação pontual fora de qualquer contexto de projeto. Para trabalho de projeto de longo prazo, configure o Prettier localmente; para trabalho pontual sem fricção, esta ferramenta tem a forma certa.

Meus arquivos HTML são enviados?

Não. A formatação roda inteiramente no seu navegador via JavaScript. O HTML que você cola nunca cruza a rede, verifique na aba Network do DevTools ao clicar Format, ou coloque a página offline (modo avião) após carregar e a ferramenta continua funcionando. Segura para templates de produto não lançados, páginas admin internas, variantes A/B-test, templates de e-mail com conteúdo personalizado, ou qualquer HTML que você não queira ver copiado no disco rígido de um desconhecido.

Ferramentas relacionadas