Formatador de HTML Online

Formatador de HTML para embelezar ou minificar marcação e formatar CSS e JS inline com Prettier.

Seu HTML é embelezado, minificado e visualizado inteiramente no seu navegador — nada é enviado para um servidor.

Criado e mantido por Udit Agarwal

Limpando folhas de estilo também? Experimente o CSS Formatter.

Sobre Formatador de HTML

Este formatador de html embeleza ou minifica marcação bruta e formata qualquer CSS e JavaScript inline automaticamente usando Prettier. Cole saída de template bagunçada, páginas extraídas ou marcação escrita à mão e obtenha HTML limpo e indentado de forma consistente em um único passo, ou mude para o modo de minificação para remover espaços em branco e reduzir o documento para produção. Um preview isolado permite renderizar a marcação com segurança e com scripting desativado, então scripts embutidos nunca são executados. Como embelezador e prettifier de html, foi feito para desenvolvedores front-end, engenheiros de QA e qualquer um que precise formatar html online sem trocar de contexto. Tudo roda localmente no seu navegador, então seus dados nunca saem do seu dispositivo. Escolha tabulações ou espaços para a indentação combinar com o estilo do seu projeto.

Recursos

• Embeleze HTML com indentação consistente e legível
• Minifique HTML para remover espaços em branco e reduzir a saída
• Formate blocos <style> e <script> inline via Prettier
• Preview isolado renderiza a marcação com scripting desativado
• Alterne entre tabulações e espaços para a indentação
• Lida com páginas completas ou trechos parciais de marcação
• Copie a saída formatada ou minificada com um clique
• Roda inteiramente no seu navegador

Como usar Formatador de HTML

1. Cole seu HTML na caixa de entrada.
2. Escolha Embelezar para formatar, Minificar para comprimir ou Preview para renderizar.
3. Ative ou desative Tabulações para definir seu estilo de indentação.
4. Copie o HTML formatado ou minificado do painel de saída.

Exemplo

Entrada

<div   class="card"><h1>Oi</h1><p>Olá   mundo</p></div>

Saída

<div class="card">
  <h1>Oi</h1>
  <p>Olá mundo</p>
</div>

O modo Embelezar reindenta a marcação e normaliza os espaços em branco.

Erros comuns e solução de problemas

• Scripts embutidos não rodam no preview. — Isso é intencional — o preview é um iframe isolado com scripting desativado para que as páginas sejam renderizadas com segurança. Teste código interativo no seu próprio ambiente.
• CSS ou JS inline não é reformatado. — Garanta que o código esteja dentro de tags <style> ou <script> adequadas; o Prettier só formata blocos inline reconhecidos durante o embelezamento.
• Tags malformadas ou não fechadas produzem indentação inesperada. — Feche as tags incompatíveis na sua origem — o formatador reflui a estrutura válida, mas não consegue adivinhar o aninhamento pretendido.
• A saída minificada é difícil de ler. — Volte ao modo Embelezar; a minificação é destinada ao tamanho de produção, não à legibilidade.

Perguntas frequentes

O que é o Formatador de HTML?

O Formatador de HTML é uma ferramenta no navegador que embeleza ou minifica marcação HTML com Prettier, formata CSS e JavaScript inline e visualiza o resultado em um iframe isolado.

Como embelezo HTML minificado?

Cole seu HTML minificado na caixa de entrada e escolha Embelezar. O Formatador de HTML reindenta a marcação e reformata quaisquer blocos <style> e <script> inline para legibilidade.

O Formatador de HTML formata CSS e JavaScript inline?

Sim. O Prettier formata blocos <style> e <script> automaticamente como parte do embelezamento da página.

Posso minificar HTML além de embelezar?

Sim. Mude para o modo Minificar para remover espaços em branco e produzir a menor marcação equivalente para produção.

Posso escolher tabulações em vez de espaços?

Sim. Ative a opção Tabulações no Formatador de HTML para indentar com tabulações, ou deixe-a desativada para usar espaços.

Meu HTML é enviado para algum lugar quando o formato?

Não. Toda a formatação e renderização do preview acontecem localmente no seu navegador, então sua marcação nunca sai do seu dispositivo.

Ferramentas relacionadas

• Formatador de CSS / SCSS — Embeleze ou minifique CSS/SCSS/LESS, ordene propriedades e remova duplicatas.
• Formatador de JS / TS — Embeleze JavaScript, TypeScript e JSX/TSX com opções do Prettier, ou minifique JavaScript puro.
• Formatador de XML — Embeleze, minifique e valide XML, e converta XML ↔ JSON.
• Escapar / Desescapar HTML — Escape e desescape caracteres especiais e entidades HTML.
• Prévia de Markdown — Renderize Markdown em HTML com prévia ao vivo.
• Otimizador de SVG — Minifique SVG: remova comentários, metadados e restos do editor, e colapse espaços.
• Formatador de JSON — Embeleze, minifique e valide JSON com a localização dos erros.
• Formatador de SQL — Formate SQL para MySQL, PostgreSQL, SQL Server, SQLite, BigQuery e Oracle.

Mais ferramentas de Formatadores de código

• Formatador de XML — Embeleze, minifique e valide XML, e converta XML ↔ JSON.
• Formatador de SQL — Formate SQL para MySQL, PostgreSQL, SQL Server, SQLite, BigQuery e Oracle.
• Formatador de GraphQL — Formate ou minifique consultas e esquemas GraphQL, valide a sintaxe e extraia operações.
• Formatador de Dockerfile — Formate um Dockerfile e receba sugestões de boas práticas e lint.
• Formatador de consultas MongoDB — Formate consultas do shell do MongoDB e pipelines de agregação.
• Verificador de contraste — Verifique a relação de contraste WCAG e se passa em AA/AAA entre duas cores.
• Renderizador de diagramas Mermaid — Renderize diagramas Mermaid (fluxo, sequência, gantt) em SVG no seu navegador.
• Otimizador de SVG — Minifique SVG: remova comentários, metadados e restos do editor, e colapse espaços.
• Embelezador de consultas MongoDB — Embeleze e indente consultas MongoDB e instruções find() no seu navegador.
• Embelezador de agregações MongoDB — Embeleze e indente pipelines de agregação do MongoDB no seu navegador.
• Explorador do MongoDB — Explore uma amostra de documento ou coleção do MongoDB e infira o esquema e os tipos dos campos.
• Formatador de OpenAPI / Swagger — Formate e valide especificações OpenAPI / Swagger (JSON ou YAML) e conte caminhos e operações.

Ver todas as ferramentas de Formatadores de código (32) · Todas as ferramentas