Como indentar HTML desorganizado?

Cole o seu HTML com a opção Embelezar selecionada e defina Indentar para 2 espaços, 4 espaços ou Tabulações. A saída é atualizada enquanto você digita e pode copiá-la ou baixar um arquivo .html. Carregar exemplo mostra uma amostra.

Pode quebrar linhas longas ou formatar CSS e JavaScript inline?

Sim. Quebra oferece Sem quebra, 80 colunas ou 120 colunas, e a opção Formatar tags style e script também formata o CSS e JavaScript dentro desses blocos. O conteúdo em pre e textarea é deixado exatamente como escrito.

Como minificar HTML para produção?

Selecione Minificar. O espaço em branco entre tags é colapsado e os comentários são removidos, a menos que selecione Manter comentários. As caixas de seleção opcionais são Remover aspas opcionais, Abreviar atributos booleanos e minificar style, script e atributos style incorporados.

Minificar vai estragar os meus blocos pre ou scripts?

O conteúdo de pre, script, style e textarea é protegido durante o colapso de espaços em branco, e um espaço é mantido entre elementos inline adjacentes para que as palavras não se fundam. A minificação incorporada opcional aplica-se apenas se você a selecionar.

O meu HTML é enviado para um servidor?

Não. Um tokenizador incorporado na página processa a marcação no seu navegador, por isso modelos privados e HTML de email permanecem no seu dispositivo. Nenhuma biblioteca de formatação de terceiros é carregada.

Sim. Todas as ferramentas são gratuitas, sem conta e sem cartão de crédito. O processamento acontece no seu dispositivo, e não nos nossos servidores, e é isso que permite manter tudo gratuito.

Sim. Funciona nos navegadores móveis atuais em iOS e Android, sem instalar nada.

🌐

Embelezador e Minificador de HTML grátis

Formate ou minifique HTML com indentação de aninhamento adequada. Preserva o conteúdo dentro de blocos <pre>, <script> e <style>.

Executa no seu navegadorSem inscrição, sem pop-upsSem login necessárioGratuito para sempre

Funciona offline depois de carregado

Recuo:

Quebra:

Formatar <style> e <script>

Solte um arquivo aqui ou clique para procurar

HTML, HTM · processado no seu dispositivo

ou pressione Ctrl+V para colar da área de transferência

Procurar arquivos

Entrada HTML

HTML formatado

A saída aparecerá aqui…

Usos comuns

Depurar HTML Renderizado por ServidorVisualize saída bruta de HTML do seu servidor (PHP, Rails, Django, Node) em formato recuado legível.
Formatar Modelos de Email HTMLHTML de email é verboso (tabelas, estilos inline). Formate para torná-lo editável e sustentável.
Formatar Páginas HTML EstáticasArquivos HTML estáticos editados manualmente se beneficiam de formatação consistente para edição colaborativa.
Limpar HTML Exportado do CMSWordPress, Wix, Squarespace exportam HTML com muitos artefatos. Formate para torná-lo editável.
Minificar HTML para ProduçãoReduza o tamanho do arquivo HTML para carregamento de página mais rápido removendo espaço em branco e caracteres desnecessários.

Como funciona

Esta ferramenta formata ou comprime HTML usando um tokenizador consciente de tags escrito à mão construído diretamente na página — sem biblioteca de formatação de terceiros, sem ida e volta ao servidor. Cada caracter da sua marcação é processado localmente no navegador no momento em que escreve ou cola.

1
O tokenizador analisa a marcação
Um analisador personalizado caracter por caracter percorre a string HTML, identificando comentários, declarações DOCTYPE, tags de abertura, tags de fecho, elementos void auto-fechados (br, img, input, etc.), e nós de texto bruto. Um auxiliar dedicado acompanha valores de atributos entre aspas para que caracteres como > dentro de um atributo (por exemplo, value="a>b") nunca façam uma tag dividir-se prematuramente.
2
A profundidade de indentação é acompanhada por tag
Para o modo embelezar, o tokenizador mantém um contador de profundidade. Tags de abertura de nível de bloco aumentam a profundidade; tags de fecho diminuem-na antes de serem escritas. Elementos inline (span, a, strong, em, etc.) são mantidos na mesma linha que o seu conteúdo em vez de empurrados para a sua própria linha indentada. Tags como pre, script, style, e textarea têm o seu conteúdo interno emitido literalmente para evitar corromper código sensível a espaço em branco ou executável.
3
O minificador colapsa espaço em branco em segurança
No modo minify, o conteúdo dos blocos pre, script, style, e textarea é trocado por sentinelas numeradas antes de qualquer colapso de espaço em branco acontecer. Os comentários HTML são removidos, e sequências de espaço em branco entre tags são removidas — exceto entre elementos inline adjacentes, onde um único espaço é preservado para que as palavras não se fundam. Os marcadores sentinela são depois restaurados ao seu conteúdo original.
4
A saída é mostrada e opcionalmente salva
O resultado formatado ou minificado aparece ao vivo no painel de saída junto com uma porcentagem de mudança de tamanho. Você pode copiá-lo para a área de transferência ou baixá-lo como um arquivo .html, tudo sem sair do navegador.