Ferramenta de Formatação HTML
O que é Formatação HTML?
A formatação HTML reorganiza marcação bagunçada ou comprimida em código legível, com indentação consistente, quebras de linha e hierarquia de tags visível. Ela facilita revisão, depuração, ensino, repasse entre equipes e manutenção, especialmente ao procurar tags não fechadas, aninhamento incorreto, listas longas de atributos ou HTML gerado difícil de examinar. Para produção, a operação oposta também pode ser útil: a minificação remove espaços, comentários e quebras desnecessárias para reduzir o tamanho transferido. A ferramenta ajuda a alternar entre HTML legível e compacto, mas não corrige automaticamente semântica, acessibilidade, links quebrados, conteúdo embutido inseguro ou erros de templates.
Como Usar
Como usar
- Cole ou digite o código HTML na caixa de entrada à esquerda
- Selecione o tamanho da indentação e o comprimento máximo da linha
- Clique em 'Formatar' para embelezar o código ou em 'Minificar' para reduzir o tamanho
- Visualize o código formatado à direita (com destaque de sintaxe)
- Clique em 'Copiar' para copiar para a área de transferência
Descrição das Opções
Atalhos de Teclado
- Ctrl + EnterFormatar
- Ctrl + Shift + CCopiar resultado
Dicas de Formatação
- A formatação pode revelar aninhamentos incorretos ou scripts inline suspeitos, mas não sanitiza o HTML nem torna marcações inseguras em seguras.
- Minifique apenas cópias destinadas à entrega. Mantenha o código-fonte legível para revisão, comparações e verificações de acessibilidade.
Casos de uso
Princípio técnico
Um formatador HTML segue o algoritmo de construção de árvore do WHATWG HTML Standard. Os bytes são decodificados (tipicamente UTF-8 conforme o meta charset ou BOM), o tokenizer percorre os dados, RCDATA, RAWTEXT, script-data e diversos estados de atributos definidos na seção §13.2.5, e o estágio de construção da árvore constrói um DOM usando a máquina de estados do modo de inserção (initial, before html, in head, in body, in table, in select etc.). O parser é tolerante por design: `<p>` não fechado é automaticamente fechado quando um bloco o segue, `</tr>` solto é ignorado, e `<table>` mal posicionado recebe foster-parenting. Parsers de nível navegador expõem isso através de `new DOMParser().parseFromString(src, 'text/html')`; ferramentas do lado Node usam parse5 (a implementação de referência do WHATWG), htmlparser2 ou cheerio. A reimpressão percorre a árvore resultante e serializa por categoria de elemento. Elementos void - `area`, `base`, `br`, `col`, `embed`, `hr`, `img`, `input`, `link`, `meta`, `source`, `track`, `wbr` - nunca recebem uma tag de fechamento em HTML5 (o auto-fechamento XHTML `/>` é permitido, mas opcional). Contêineres de nível bloco (`div`, `section`, `article`, `header`, `footer`, `nav`, `main`, `ul`, `ol`, `li`, `table`) recebem sua própria linha com depth*indent espaços; conteúdo de frase/inline (`span`, `a`, `strong`, `em`, `code`) é mantido inline porque o CSS `white-space: normal` colapsa sequências de espaços em um único caractere. Dois tipos de elementos devem ser preservados literalmente: `<pre>` e `<textarea>` carregam semântica `white-space: pre`, e sua quebra de linha inicial é consumida pelo parser; os corpos de `<script>` e `<style>` são RAWTEXT, então reindentar seus conteúdos mudaria o comportamento em tempo de execução - eles geralmente são delegados a um sub-formatador JS ou CSS e re-incorporados. A serialização de atributos normaliza a citação (simples vs. dupla) e recodifica delimitadores embutidos através das referências de caracteres nomeadas `&`, `<`, `>`, `"` e da numérica `'`. A ordem dos atributos não é significativa no DOM, então formatadores tipicamente aplicam uma ordem estável (`id`, `class`, depois alfabética). A quebra de linha é ativada ao ultrapassar o printWidth configurado: atributos são divididos um por linha com o `>` de fechamento em sua própria linha (prettier-plugin-html `bracketSameLine: false`) ou conectado. A minificação inverte o processo - espaços em branco entre tags de bloco são removidos, comentários são removidos exceto condicionais IE `<!--[if`, e aspas são removidas de atributos cujo valor corresponde a `[A-Za-z0-9._-]+`. Ambas as operações são O(n) sobre o comprimento da entrada.
- Parser: construção de árvore HTML do WHATWG (§13) via `DOMParser('text/html')` no navegador, parse5/htmlparser2/cheerio no Node; a máquina de estados do modo de inserção lida com tags ausentes/mal posicionadas e foster parenting.
- Elementos void (sem tag de fim): area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr - 14 elementos conforme o HTML Living Standard. O auto-fechamento XHTML `/>` é tolerado, mas redundante.
- Elementos que preservam espaços em branco: `<pre>` e `<textarea>` carregam CSS `white-space: pre` e consomem uma quebra de linha inicial; seus bytes internos nunca são re-indentados ou a saída visível muda.
- Contextos RAWTEXT: os corpos de `<script>` e `<style>` não são HTML - são delegados a sub-formatadores JS/CSS (ou deixados como estão). Re-indentar texto bruto dentro de uma regex ou literal de string quebraria a semântica em tempo de execução.
- Normalização de atributos: estilo de citação escolhido (simples/dupla), delimitadores embutidos re-codificados com as cinco referências nomeadas (`&`, `<`, `>`, `"`, `'`), ordem estável aplicada (id, class, depois alfabética) já que a ordem no DOM não é significativa.
- Quebra de linha ao ultrapassar printWidth (tipicamente 80/100/120): atributos divididos um por linha com o `>` de fechamento em sua própria linha ou conectado ao último atributo, espelhando a opção `bracketSameLine` do prettier-plugin-html.
- Minificação: colapsa espaços em branco entre tags, remove comentários (mantendo condicionais `<!--[if IE]>`), remove tags de fim opcionais (`</li>`, `</p>` quando seguidas por um irmão), e remove aspas de atributos que correspondem a `[A-Za-z0-9._-]+`; round-trip é O(n).
Exemplos
HTML minificado → formatado (indentação de 2 espaços)
Entrada:
<div class="card"><h2>Title</h2><p>Body text</p></div>
Formatado:
<div class="card">
<h2>Title</h2>
<p>Body text</p>
</div>Formatado → minificado (deploy de produção)
Origem (412 bytes):
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
Minificado (96 bytes, -77%):
<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>Lista longa de atributos quebrada em várias linhas
Entrada:
<input type="email" id="user-email" name="email" placeholder="you@example.com" required autocomplete="email">
Formatado (quebra > 80 caracteres):
<input
type="email"
id="user-email"
name="email"
placeholder="you@example.com"
required
autocomplete="email"
>Tags auto-fechadas e conteúdo inline preservados
Entrada:
<p>Click <a href="/docs">here</a> for help.<br><img src="icon.png" alt=""></p>
Formatado (irmãos inline permanecem na mesma linha):
<p>
Click <a href="/docs">here</a> for help.
<br>
<img src="icon.png" alt="">
</p>Perguntas frequentes
O que ele formata?
Marcação HTML: indentação, posicionamento de atributos, tratamento de linhas em branco e (opcionalmente) quebra de linha numa largura de coluna escolhida. Não muda o resultado renderizado — sua página fica idêntica, só o código-fonte fica mais legível.
Ele preserva meus blocos <pre>, <textarea> e <script>?
Sim. O espaço em branco dentro de pre, textarea, code e script é significativo (aparece na renderização), e o formatador o deixa intacto. Outros elementos têm o espaço em branco normalizado.
Por que minhas tags autofechadas são reescritas?
<br/>, <img/>, <hr/> em HTML5 equivalem a <br>, <img>, <hr> (o HTML5 não exige a barra). O formatador pode escolher um estilo de forma consistente. Para templates XHTML/JSX/Vue, configure o formatador para manter a barra final.
Ele valida o HTML?
Não. Ele formata o que você cola. Para validar, use o W3C Validator ou as ferramentas de desenvolvedor do navegador. Problemas comuns como tags não fechadas ou aspas desbalanceadas passam direto pela formatação.
O HTML é enviado para algum servidor?
Não. A formatação roda no seu navegador. O HTML colado nunca trafega pela rede.
Ele consegue minificar HTML?
Sim, se houver um modo de minificação. A minificação de HTML remove o espaço em branco entre tags, comprime sequências de espaços dentro do texto e tira tags de fechamento opcionais. O resultado é mais difícil de ler, porém menor — útil para builds de produção.
E o CSS e JS embutidos?
O conteúdo de <style> e <script> normalmente é formatado pelos formatadores específicos (CSS, JS) quando a página suporta. Caso contrário, o conteúdo interno fica como está, para evitar quebrar a sintaxe.