Ver ferram.
Free · Fast · Privacy-first

Formatador Html Com 2 Espacos

O formatador HTML com 2 espaços aplica a convenção mais popular da comunidade web moderna para indentação de marcação.

⚡

Indentação fixa de 2 espaços conforme convenção moderna da comunidade.

🔒

Compatibilidade total com Prettier, ESLint plugins e formatadores de IDEs.

✨

Aceita HTML5, fragmentos parciais e templates de frameworks modernos.

⚡

Preserva comentários, atributos longos e seções CDATA do arquivo original.

Custo
Grátis para sempre
Cadastro
Não necessário
Processamento
No seu navegador
Privacidade
Arquivos locais
GrátisSem cadastroWhite-label

Adicione HTML Formatter ao seu site

Coloque HTML Formatter em qualquer página — post de blog, documentação de produto, intranet, portal escolar — com uma única linha de HTML. Seus visitantes recebem a ferramenta completa, processada inteiramente no navegador. Sem backend, sem uploads, sem cadastro.

  • Arquivos permanecem 100% no navegador do visitante
  • Responsivo — adapta-se a qualquer largura de contêiner
  • Grátis para sempre, sem chave de API

Código de incorporação

<iframe
  src="https://www.fixtools.io/html/html-formatter?embed=1&lang=pt"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="HTML Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Atribuição amigável: um pequeno link "Powered by FixTools" aparece no rodapé do embed.

Por que 2 espaços é o padrão dominante da comunidade web moderna

A convenção de 2 espaços surgiu como dominante no ecossistema JavaScript no início dos anos 2010, impulsionada por bibliotecas como jQuery, Node.js e depois React. A razão principal é que código com componentes pequenos e aninhamento moderado fica visualmente equilibrado com indentação menor, sem desperdiçar largura horizontal da tela. Em monitores ultrawide modernos isso parece bobagem, mas no contexto de pull requests visualizados em lado a lado, code review em ferramentas web ou edição em telas pequenas de notebook, cada caractere de largura conta para a legibilidade geral do código apresentado no momento.

O Prettier, ferramenta de formatação que se tornou praticamente padrão na comunidade JavaScript, usa 2 espaços como padrão para HTML, JSX, CSS e JavaScript. Adotar a mesma convenção no seu projeto significa zero atrito com Prettier e zero discussão sobre estilo nos pull requests. O Prettier também é configurado nas integrações mais comuns como GitHub Actions, GitLab CI e ferramentas de pre-commit hook, então usar 2 espaços faz com que sua marcação seja aceita por toda a tooling moderna sem precisar de ajuste fino especial para cada caso particular.

Vale notar que escolher 2 espaços não é uma decisão religiosa, é uma decisão pragmática. Projetos legados que usam 4 espaços continuam válidos e bem mantidos. O ponto importante é a consistência dentro do projeto. Se você está começando um repositório novo em 2025, ir com 2 espaços é a escolha que tem menos atrito com a tooling moderna e o que a maior parte dos desenvolvedores recém-contratados vai esperar encontrar como padrão. Se você está mantendo um projeto antigo com 4 espaços, geralmente vale manter o estilo existente para não criar diffs gigantes que dificultam o git blame e o histórico do repositório.

Para times distribuídos com múltiplas pessoas trabalhando em fusos diferentes, ter uma convenção clara e ferramentas que aplicam essa convenção automaticamente é fundamental. O formatador HTML com 2 espaços do FixTools serve como complemento à automação local: você usa Prettier no editor para o dia a dia e a ferramenta web para casos rápidos onde não está no IDE configurado, como revisar um e-mail recebido com fragmento de HTML, inspecionar uma página externa durante pesquisa de mercado ou preparar um exemplo para incluir em apresentação de conferência onde a IDE não está disponível.

Opção tabWidth no Prettier (padrão 2)Guia de estilo HTML do Airbnb

How to use this tool

💡

Cole seu HTML e receba a versão indentada com 2 espaços conforme padrão moderno.

Como Funciona

Guia passo a passo para formatador html com 2 espacos:

  1. 1

    Reúna o HTML que você precisa indentar com 2 espaços

    Localize o trecho ou arquivo a tratar. Pode vir do seu editor, de uma resposta do servidor, de um e-mail HTML ou de um template baixado de qualquer ferramenta externa. O código original pode estar minificado, com indentação de 4 espaços que você quer converter para 2, ou com mistura aleatória entre estilos. Não precisa fazer limpeza prévia, o formatador aceita qualquer entrada válida sintaticamente e normaliza para a convenção de 2 espaços automaticamente durante o processamento da estrutura geral.

  2. 2

    Cole o conteúdo no painel de entrada da ferramenta

    Abra o formatador no navegador e cole o HTML usando Ctrl+V ou Cmd+V no campo superior. O contador de caracteres mostra o tamanho do conteúdo carregado para sua referência rápida. A área aceita textos grandes incluindo páginas inteiras de produção ou templates extensos de e-mail. Se aparecer algum aviso prévio sobre anomalias sintáticas, decida se prefere processar do jeito que está ou revisar a fonte original antes de prosseguir com a formatação na ferramenta.

  3. 3

    Confirme que a opção 2 espaços está selecionada

    No painel de configuração da ferramenta, confirme que a opção de 2 espaços está marcada. Em alguns casos esse já é o padrão da ferramenta, mas vale conferir visualmente antes de processar para garantir que a saída sai na convenção desejada. A escolha fica salva durante a sessão do navegador, então formatar vários trechos consecutivos com a mesma preferência não exige reconfiguração entre operações distintas realizadas sequencialmente em ordem.

  4. 4

    Acione o formatador e confira o resultado

    Clique no botão Formatar para acionar o processamento. O motor analisa a estrutura do HTML, identifica todos os níveis de aninhamento e aplica indentação consistente de 2 espaços em cada nível. O resultado aparece no painel inferior em milissegundos para a maioria das entradas. Percorra a saída verificando se a hierarquia visual está coerente, se tags filhas aparecem dois espaços à direita das tags pai e se nenhum atributo importante ficou cortado ou mal-alinhado em meio à reorganização aplicada.

  5. 5

    Copie a saída e integre ao seu projeto

    Use o botão de cópia rápida para enviar o HTML formatado para a área de transferência, ou baixe como arquivo .html para guardar localmente. Cole no editor onde o código vai ser usado, na documentação técnica ou no e-mail para o cliente. Se trabalha com um projeto React, Vue ou Astro, o resultado deve encaixar perfeitamente com o resto dos arquivos sem ajuste adicional, já que 2 espaços é a convenção esperada por essas comunidades técnicas modernas e suas respectivas ferramentas de tooling associadas.

Exemplos do mundo real

Situações comuns em que essa abordagem faz diferença real:

Conversão de templates legados para padrão React moderno

Quando você migra um projeto antigo de WordPress ou PHP puro para React, os templates HTML originais costumam estar com indentação de 4 espaços ou inconsistente. Converter tudo para 2 espaços antes de integrar facilita a adoção do estilo do novo projeto e diminui a fricção visual entre código antigo importado e novo código escrito. O formatador com 2 espaços faz essa normalização em massa de forma rápida sem você precisar configurar nada manualmente arquivo por arquivo do repositório legado.

Preparação de exemplos de código para documentação Astro

Projetos com Astro Starlight, Docusaurus ou Nextra costumam exigir que exemplos de código sigam o estilo do framework, que para HTML/JSX/Vue significa 2 espaços. Formatar todos os exemplos da documentação com essa convenção antes de publicar garante consistência visual no portal de docs. Isso melhora a percepção de qualidade do conteúdo e diminui questões de leitores que ficam confusos com indentação diferente entre exemplos do mesmo tutorial ou guia técnico online publicado.

Padronização de componentes vindos de bibliotecas externas

Ao incorporar componentes de bibliotecas como Headless UI, Radix ou shadcn/ui no seu projeto, os exemplos copiados da documentação às vezes vêm com indentação levemente diferente do seu padrão. Passar pelo formatador antes de colar no repositório garante alinhamento com a convenção interna do projeto. Esse passo extra evita pull requests poluídos com mudanças de formatação na hora em que outro desenvolvedor da equipe ajustar os arquivos pela primeira vez no editor configurado com Prettier ativo.

Apresentações técnicas em conferências e meetups

Palestrantes em conferências modernas como JSConf, ReactConf, VueConf e similares geralmente mostram código com indentação de 2 espaços porque é o estilo da comunidade. Formatar seus slides com essa convenção antes da apresentação demonstra alinhamento com a cultura técnica do evento e evita comentários sobre estilo durante o Q&A. Detalhe pequeno que aumenta a credibilidade percebida do palestrante e indica atenção aos padrões da comunidade onde ele está se apresentando para o público.

Dicas profissionais

Obtenha melhores resultados com estas sugestões de especialistas:

1

Configure Prettier com tabWidth 2 no projeto inteiro

Adicione um arquivo .prettierrc na raiz do projeto especificando tabWidth de 2 para garantir que toda a tooling local respeite a mesma convenção que a ferramenta web. Combine com um pre-commit hook que executa Prettier automaticamente antes de cada commit, e a consistência fica garantida sem depender da memória dos colaboradores. Esse setup transforma a indentação em algo invisível que apenas acontece em segundo plano sem virar discussão recorrente em cada revisão de código.

2

Use 2 espaços para arquivos novos, mantenha o legado

Se você está num projeto antigo com 4 espaços e quer começar a migrar para 2, faça gradualmente: arquivos novos seguem a convenção nova, arquivos legados são convertidos apenas quando recebem alterações significativas que já vão gerar diff grande de qualquer jeito. Essa abordagem evita commits gigantes só de formatação e mantém o git blame útil para o histórico do projeto sem perder a capacidade de rastrear quem mudou o que e quando ao longo do tempo.

3

Documente o estilo no contributing guide

Adicione uma seção no CONTRIBUTING.md do repositório especificando que o projeto usa 2 espaços para HTML, CSS e JavaScript. Inclua um exemplo curto de antes e depois e mencione qual ferramenta usar para conformar (Prettier configurado, formatador web do FixTools ou similar). Isso reduz drasticamente o atrito de onboarding e evita que contribuidores externos abram PRs com estilo errado que precisam ser reformatados antes de poderem ser aceitos pelos mantenedores do projeto.

4

Reforce a convenção via CI automatizado

Configure GitHub Actions ou GitLab CI para rodar Prettier em modo de verificação em cada pull request. Se algum arquivo não estiver formatado com 2 espaços, o CI falha e o autor recebe feedback automático antes de qualquer revisão humana. Isso libera revisores para focar em decisões importantes em vez de apontar problemas mecânicos de formatação. O setup é simples de configurar e a economia de tempo da equipe ao longo do tempo é enorme em comparação ao esforço inicial mínimo.

FAQ

Perguntas frequentes

A convenção se popularizou com o crescimento do ecossistema JavaScript moderno e da prevalência do Prettier como ferramenta de formatação. Times perceberam que 2 espaços oferecem boa diferenciação visual entre níveis de aninhamento sem desperdiçar largura horizontal da tela, especialmente em code review lado a lado e em telas pequenas. O Prettier adotou como padrão e o efeito de rede consolidou. Hoje frameworks como React, Vue, Svelte e Astro esperam essa convenção, e ir contra cria atrito desnecessário com a tooling moderna mainstream.
Depende. Se o projeto é mantido ativamente e a equipe quer modernizar, vale fazer a conversão num commit dedicado e separado de qualquer mudança funcional, depois ajustar o pre-commit hook para enforçar 2 espaços daí em diante. Se o projeto está em modo manutenção apenas, manter 4 espaços evita poluir o git blame com mudanças massivas de formatação. A decisão é pragmática e depende do contexto. O importante é consistência: nunca misturar 2 e 4 espaços dentro do mesmo arquivo HTML.
O formatador é otimizado para HTML puro, mas aceita o bloco template de componentes Vue desde que o HTML interno seja válido. Para SFCs completos com template, script e style, recomendamos extrair apenas o template, formatar com 2 espaços, e colar de volta. Para formatação completa do SFC inteiro, é melhor usar o Prettier com o plugin oficial do Vue diretamente no editor da sua IDE local, já que o plugin entende a estrutura do arquivo .vue como um todo e formata tudo simultaneamente.
Sim. JSX, embora seja JavaScript, usa convenções similares de HTML para a parte de marcação. O Prettier formata JSX com 2 espaços por padrão, e isso virou o padrão de fato em projetos React. Atributos longos quebram em linhas separadas com indentação adicional de 2 espaços, props ficam alinhados verticalmente quando há muitos, e a estrutura geral segue as mesmas regras de HTML puro. Adotar 2 espaços em todo o stack (HTML, JSX, CSS, JS) maximiza consistência visual entre arquivos diferentes do mesmo projeto.
Markdown que contém blocos HTML aceita formatação parcial. Você pode extrair apenas o bloco HTML interno do Markdown, passar pelo formatador com 2 espaços, e colar de volta. Cuidado para não quebrar o contexto Markdown em volta, que tem suas próprias regras sobre espaços em branco. Para arquivos Markdown completos, recomendamos usar o Prettier com plugin de Markdown, que entende a sintaxe combinada e formata corretamente tanto o Markdown quanto o HTML embutido sem causar problemas indesejados na renderização da estrutura.
A ferramenta web é independente e não lê arquivos de configuração locais como .editorconfig. Você seleciona a convenção desejada (2 espaços, neste caso) diretamente na interface da ferramenta. Para projetos onde você usa o EditorConfig localmente, a tooling do editor cuida da consistência no dia a dia, e a ferramenta web serve como complemento para casos pontuais onde você não está no editor configurado, como revisar um e-mail recebido com HTML ou inspecionar uma página externa durante pesquisa.
A diferença é como o caractere é armazenado no arquivo. Tabulações são um único caractere que cada editor pode renderizar com largura visual configurável (geralmente 2, 4 ou 8 espaços). Espaços são exatamente o número de caracteres de espaço inseridos no arquivo. A vantagem de espaços é renderizar igual em qualquer ferramenta (incluindo terminais, exibições de diff, sites de Git web). A vantagem de tabulações é permitir flexibilidade visual sem alterar o arquivo. A comunidade moderna escolheu espaços majoritariamente.
Por padrão o formatador HTML com 2 espaços segue as convenções do Prettier, que mantém linhas em branco apenas onde existiam no original. Não adiciona linhas em branco entre blocos automaticamente, mas preserva as que você já tinha colocado intencionalmente. Isso permite que você use linhas em branco como marcador visual de separação entre seções lógicas do template e a ferramenta respeita sua decisão. Múltiplas linhas em branco consecutivas são geralmente colapsadas em uma única para evitar excesso de espaço vertical no arquivo final.
O painel de entrada onde você colou o HTML original permanece inalterado durante todo o processo. O resultado formatado aparece num painel separado, então você sempre tem acesso à versão original simplesmente olhando para o campo superior. Se quiser reverter, basta copiar do painel de entrada novamente. Para casos onde você processou várias vezes e perdeu a origem inicial, conviria recolar o conteúdo original; a ferramenta não mantém histórico de operações entre processamentos consecutivos durante a mesma sessão do navegador.
Sim, ao adotar a convenção de 2 espaços conforme padrão da comunidade, o resultado da ferramenta web fica compatível com Stylelint, ESLint plugins de HTML e o Prettier. Você pode usar a ferramenta web para gerar formatação inicial e depois passar pelos linters para validações adicionais. Essa combinação garante código que segue boas práticas de estilo, sintaxe e semântica simultaneamente. O fluxo ideal é tooling automatizada local cobrindo a maior parte do trabalho e a ferramenta web atendendo casos pontuais não cobertos.
O formatador HTML com 2 espaços do FixTools funciona em todos os navegadores modernos: Chrome, Firefox, Safari, Edge, Brave e Opera, em desktop e dispositivos móveis. Requer JavaScript habilitado e suporta versões lançadas nos últimos cinco anos. Não há necessidade de instalar extensões, plugins ou software adicional, todo o processamento acontece no navegador usando APIs padrão. Para arquivos muito grandes, Chrome ou Firefox no desktop oferecem melhor desempenho de memória. Internet Explorer não é suportado por limitações.
Não há limite artificial imposto pela ferramenta. O limite prático depende da memória RAM disponível no seu equipamento, já que o processamento acontece dentro do navegador. Equipamentos modernos com 8 GB ou mais de memória lidam confortavelmente com arquivos de várias centenas de megabytes. Para documentos verdadeiramente enormes, recomendamos dividir em seções lógicas e processar separadamente para manter a experiência fluida. A ferramenta avisa caso detecte que o arquivo vai exceder a capacidade do seu navegador específico em uso.

Related tools

Other tools you might find useful:

Formatador HTML com 4 espaços

Minificador HTML

Validador HTML

Formatador CSS

Pronto para começar?

Abra o HTML Formatter completo — grátis, sem conta, funciona em qualquer dispositivo.

Abrir HTML Formatter →

Grátis · Sem conta · Funciona em qualquer dispositivo