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 e inline para legibilidade.

O Formatador de HTML formata CSS e JavaScript inline?

Sim. O Prettier formata blocos e 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.

Formatador de HTML

Embeleze ou minifique HTML, formate CSS/JS inline e veja a prévia do resultado.

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

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

Cole seu HTML na caixa de entrada.
Escolha Embelezar para formatar, Minificar para comprimir ou Preview para renderizar.
Ative ou desative Tabulações para definir seu estilo de indentação.
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 ou minifique JavaScript, TypeScript e JSX/TSX com opções do Prettier.
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.