Como usar: Formatador HTML
- Cole seu HTML na caixa HTML de entrada, arraste um arquivo
.htmlpara ela ou clique em Exemplo. - No modo Formatar, escolha a indentação (2 espaços, 4 espaços ou tabulações), a largura de quebra de linha e como os atributos devem ser organizados.
- O resultado formatado é atualizado enquanto você digita. Use Copiar ou Baixar para salvar.
- Precisa do processo inverso? Mude para Minificar para remover comentários e compactar os espaços em branco para produção.
O que é um formatador de HTML?
Um formatador (ou beautifier) de HTML reescreve a marcação com um elemento por linha e uma indentação consistente que reflete a árvore do documento, para que você veja de relance onde cada <div> é fechado. É a forma mais rápida de ler o código-fonte de uma exportação de page builder, um template de e-mail, um trecho de CMS ou um HTML que foi minificado para produção. Esta ferramenta usa o motor open source js-beautify, o mesmo formatador usado pela formatação HTML nativa do VS Code, e também formata o CSS dentro de <style> e o JavaScript dentro de <script>.
Opções de formatação explicadas
| Opção | O que faz |
|---|---|
| Indentação | Dois espaços é a convenção mais comum para HTML; tabulações permitem que cada desenvolvedor escolha a largura visual que preferir. |
| Quebra de linha | Quebra linhas longas de texto e atributos próximo à coluna escolhida. “Desligado” mantém o conteúdo de cada elemento em uma única linha. |
| Atributos | “Um por linha” coloca cada atributo em sua própria linha quando a tag tem vários. Útil para tags longas de Tailwind ou Alpine.js e para diffs limpos no git. |
| Indentar <head> e <body> | Aplica um nível extra de indentação aos filhos de <head> e <body>, em vez de mantê-los alinhados com <html>. |
| Manter linhas em branco | Mantém (no máximo uma) linha em branco intencional entre blocos, em vez de removê-las todas. |
Elementos inline, como <a>, <strong> e <span>, permanecem na mesma linha do texto, e o conteúdo de <pre> e <textarea> nunca é alterado, porque mudar os espaços ali alteraria o que o usuário vê.
Como funciona o minificador HTML seguro
Espaços em branco no HTML nem sempre são irrelevantes: <b>Olá</b> <i>mundo</i> exibe um espaço visível entre as palavras. Por isso, o minificador adota uma abordagem conservadora:
- Remove comentários, exceto os condicionais do Internet Explorer (marque Manter comentários para mantê-los todos).
- Reduz sequências de espaços, tabulações e quebras de linha no texto a um único espaço, exatamente como o navegador já exibe.
- Remove espaços em branco apenas onde eles nunca aparecem na tela: dentro de
<head>, ao redor de<html>,<body>, linhas de tabela e contêineres de lista. - Organiza as tags (
<p class = "a">vira<p class="a">) sem alterar os valores dos atributos. - Mantém
<pre>,<textarea>e scripts de template intactos, minifica o CSS inline, compacta o JSON-LD e minifica o JavaScript inline somente quando ele passa na verificação de sintaxe.
A economia típica fica entre 10% e 25% antes do gzip. Para um pipeline de build completo, ferramentas como o html-minifier-terser podem ir além (removendo tags ou aspas opcionais), mas com transformações mais arriscadas. Para reduzir folhas de estilo especificamente, use o Minificador CSS; para scripts, o Formatador JavaScript tem um modo de minificação próprio.
Problemas comuns
A indentação parece errada depois de uma tag. Geralmente é um elemento não fechado (um </div> que está faltando). O formatador indenta fielmente tudo o que vem depois um nível a mais, o que facilita encontrar o erro. Sintaxe de template, como blocos de Handlebars, Liquid, Jinja ou PHP, é detectada e preservada, mas lógica de template complexa dentro de atributos ainda pode gerar quebras de linha estranhas.
Também pesquisado como: formatar html, beautifier html, formatador html online, identar html, minificar html, minificador html, deixar html bonito, organizar código html.
Ferramentas que combinam com: Formatador HTML
- Formatador de CSS — Transforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media aninhados corretamente.
- Codificador de Entidades HTML — Escape < > & " para que o texto possa ser exibido com segurança no HTML, converta acentos e símbolos em entidades nomeadas ou numéricas, ou decodifique HTML cheio de entidades de volta para texto simples.
- HTML para Markdown — Cole o HTML — ou copie texto formatado direto de uma página web, Google Doc ou e-mail — e receba um Markdown organizado para usar em um README, wiki ou site estático.
- Markdown para HTML — Escreva ou cole Markdown e obtenha HTML limpo na hora, com pré-visualização ao vivo sanitizada, tabelas no estilo GitHub, listas de tarefas e blocos de código cercados.
Perguntas frequentes
Meu HTML é enviado para algum servidor?
Formatar o código vai mudar a aparência da minha página?
display:inline-block. O conteúdo de <pre> e <textarea> nunca é alterado.Qual é a diferença entre formatar e validar HTML?
Ele formata CSS e JavaScript dentro do HTML?
<style> e <script> é formatado com as mesmas configurações de indentação. Tipos de script JSON e de template são mantidos como estão.Quanto o HTML minificado fica menor?
Consigo formatar templates de Vue, Angular ou Svelte?
v-if, @click ou [prop]. Componentes de arquivo único com <script setup> e TypeScript são formatados como HTML mais script.