Ir para o conteúdo
Ferramenta gratuita

Formatador de HTML online: organize códigos HTML e CSS

O formatador de HTML, também chamado de HTML Beautifier, transforma HTML e CSS minificados ou desorganizados em código legível e com recuos. Por exemplo, a linha única body{margin:0;font-family:Arial,sans-serif}… vira regras CSS bem organizadas, com 2 ou 4 espaços ou tabulações. A linguagem é detectada automaticamente. Grátis, sem cadastro, e seu código permanece no navegador.

Criado por Luca Stanek

Código pronto? Coloque seu site no ar com hospedagem web rápida e confiável.

Coloque seu site no ar

Código formatado

O código formatado aparecerá aqui assim que você colar algo à esquerda.

Cole seu código à esquerda ou carregue um exemplo. O resultado aparecerá imediatamente.

Seu código permanece no seu navegador: ele não é enviado nem salvo.

Exemplo de resultado

O que este formatador de HTML e CSS faz com seu código

Código gerado por um minificador ou editor e o resultado com recuo de 2 espaços.

HTML

Entrada:

<nav class="navbar"><ul><li><a href="/">Start</a></li><li class="active"><a href="/tools">Tools</a></li></ul></nav><main><h1>Willkommen</h1><p>Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>, der sich nicht um   Leerzeichen schert.</p><img src="logo.png" alt="Logo"></main>

Resultado:

<nav class="navbar">
  <ul>
    <li><a href="/">Start</a></li>
    <li class="active"><a href="/tools">Tools</a></li>
  </ul>
</nav>
<main>
  <h1>Willkommen</h1>
  <p>
    Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>,
    der sich nicht um Leerzeichen schert.
  </p>
  <img src="logo.png" alt="Logo">
</main>

CSS

Entrada:

body{margin:0;font-family:Arial,sans-serif}.btn,.link{color:#fff;background:#0a84ff;padding:8px 16px}.btn:hover{opacity:.8}@media (max-width:600px){.btn{display:block}}

Resultado:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.btn,
.link {
  color: #fff;
  background: #0a84ff;
  padding: 8px 16px;
}

.btn:hover {
  opacity: .8;
}

@media (max-width: 600px) {
  .btn {
    display: block;
  }
}

Visão geral

O que é um formatador de HTML?

Um formatador de HTML, também chamado de HTML Beautifier, organiza códigos HTML e CSS para facilitar a leitura: uma estrutura por linha, com recuo uniforme. Ele detecta a linguagem automaticamente, usa recuo de 2 ou 4 espaços ou tabulação, abre arquivos de até 2 MB e altera apenas espaços e quebras de linha, exceto quando falta o último ponto e vírgula no CSS. Funciona gratuitamente no seu navegador, sem upload.

Formatar HTML

Os elementos de bloco ficam em linhas próprias e são recuados; o texto corrido é quebrado a cada 100 caracteres. Se quiser, tags longas podem ter um atributo por linha.

Formatar e embelezar CSS

Seletores, declarações e chaves ficam em linhas separadas, inclusive dentro de @media. Listas longas de valores, como transition, são divididas em várias linhas.

Idioma detectado automaticamente

Tags indicam HTML; chaves, regras @ ou propriedades com dois-pontos indicam CSS. Você também pode selecionar HTML ou CSS manualmente.

Avisos com linha e coluna

A ferramenta indica tags e chaves não fechadas com linha e coluna; um clique destaca o local no texto inserido. Ela não é um validador.

Resultado com destaque de sintaxe

Você também vê o número de linhas, além dos elementos ou das regras e declarações. Resultados com mais de 150.000 caracteres são exibidos sem cores.

No navegador, sem upload

Seu código não é enviado nem salvo. Você pode abrir arquivos de até 2 MB e copiar ou baixar o resultado.

Como funciona

Como formatar HTML e CSS online

Cinco passos, sem cadastro nem instalação.

Passo 1

Colar código

Cole HTML ou CSS no campo à esquerda, abra um arquivo (.html, .htm, .xhtml, .css ou .txt, até 2 MB) ou carregue o exemplo de HTML ou CSS.

Passo 2

Verificar idioma

Deixe a linguagem em Automático ou selecione HTML ou CSS. A linguagem detectada aparece abaixo do resultado.

Passo 3

Selecionar recuo

Use recuo de 2 espaços, 4 espaços ou tabulação. Para HTML, você decide se os atributos de tags longas são quebrados em várias linhas ou mantidos em uma só.

Passo 4

Verificar dicas

Avisos e erros indicam a linha e a coluna. Clique no link ao lado para destacar o trecho na sua entrada.

Passo 5

Aplicar resultado

Copie o código formatado ou baixe-o como formatted.html ou formatted.css.

Regras

Como funciona o formatador de HTML e CSS

Elementos de bloco

div, ul, table e outros ficam em linhas separadas, com o conteúdo recuado. Elementos curtos, como um parágrafo, permanecem em uma linha.

Texto corrido

Espaços duplicados viram um só, e parágrafos longos são quebrados a cada 100 caracteres. O espaço entre tags inline é preservado.

Tags longas

Se uma tag não couber em uma linha, cada atributo ficará em uma linha própria. Você pode desativar isso.

Inalterado

O conteúdo de pre e textarea, comentários, valores de atributos e textos permanecem inalterados. style é formatado como CSS; script pode ter apenas a indentação ajustada.

CSS: seletores, declarações e chaves ficam em linhas separadas; um ponto e vírgula final ausente é adicionado. Limitações: o código não é validado, JavaScript não é reformatado e SCSS e Less não são compatíveis.

Descobrir mais

Mais ferramentas

Comparar textos online (Diff Checker)

Compare textos online: compare dois textos, configurações ou versões de código, veja as diferenças linha por linha e palavra por palavra e copie-as como Unified Diff. Funciona inteiramente no navegador.

Criado por Dimitri Heissler

Formatador de JSON

Formate, minifique e valide JSON com realce de sintaxe, indicação de erros e download, inteiramente no navegador.

Criado por Jakub Martyniak

Formatador e validador de XML

Valide, formate, minimize e repare XML automaticamente (caracteres não escapados, tags em falta, declaração em falta) — 100 % no navegador, sem carregamento.

Criado por Justin Schuessler

Testador de Regex

Teste expressões regulares em tempo real no motor JavaScript nativo, com destaque de correspondências, grupos de captura e modo de substituição, diretamente no navegador.

Criado por Jakub Martyniak

Codificador e decodificador de URL

Codifique e decodifique URLs e textos online: compare encodeURIComponent, encodeURI e o formato de formulários, com tabela de parâmetros de consulta e criador de links UTM. Funciona totalmente no navegador.

Criado por Dimitri Heissler

Gerador de .htaccess e gerador de htpasswd

Crie arquivos Apache .htaccess e .htpasswd online: redirecionamentos 301, HTTPS, proteção por senha com bcrypt, regras do WordPress, páginas de erro, cache, GZIP e proteção contra hotlinks. Funciona inteiramente no navegador.

Criado por Dimitri Heissler

Editor de Markdown

Escreva Markdown online com pré-visualização em tempo real: README para GitHub e mensagens do Discord, tabelas do Excel e exportação para PDF ou HTML. Tudo no navegador.

Criado por Dimitri Heissler

Formatador de SQL online (formate e organize seu SQL)

Formate, organize e minifique SQL online para MySQL, MariaDB e PostgreSQL, com recuo e padronização de maiúsculas e minúsculas nas palavras-chave. Funciona inteiramente no navegador, sem upload.

Criado por Luca Stanek

Seletor de cores

Converta cores em tempo real entre HEX, RGB, HSL, HSV e CMYK, encontre a cor CSS com nome mais próxima e verifique o contraste WCAG com preto/branco — tudo no navegador.

Criado por Justin Schuessler

FAQ

Perguntas frequentes

Respostas rápidas sobre como formatar HTML e CSS com esta ferramenta.

Um formatador de HTML, também chamado de beautifier, organiza o código para facilitar a leitura: uma estrutura por linha, com recuo uniforme. Útil para código minificado, código-fonte do navegador ou código de um editor sem função de formatação. Este formatador processa HTML e CSS.

Cole o código à esquerda, e o resultado aparecerá imediatamente à direita. Escolha a indentação de 2 espaços, 4 espaços ou Tab e defina se os atributos de tags longas devem passar para outra linha. Depois, copie o resultado ou baixe-o como formatted.html.

Cole o CSS: a ferramenta o reconhece pelas chaves, regras @ ou propriedades com dois-pontos, mas você também pode selecionar CSS manualmente. Cada regra recebe linhas próprias para o seletor, as declarações e as chaves, inclusive dentro de @media. Listas longas de valores, como transition, são divididas em várias linhas, e um ponto e vírgula final ausente é adicionado. O arquivo baixado se chama formatted.css.

Não. Apenas os espaços e as quebras de linha mudam. Tags, atributos, valores, textos e comentários são preservados. A única exceção: no CSS, é adicionado um ponto e vírgula ausente após a última declaração.

O formatador altera apenas espaços, recuos e quebras de linha no código-fonte para facilitar a leitura. Para formatar o texto em HTML, você usa tags como strong, em ou br. A ferramenta não adiciona nem altera essas tags.

O conteúdo de pre e textarea permanece inalterado, pois cada espaço importa. O CSS em style é formatado; script pode ter a indentação ajustada, mas não é reformatado.

Não. Ele não valida nem minifica: apenas formata HTML e CSS. O JavaScript dentro de script não é reformatado, e SCSS e Less não são suportados. Mas ele avisa sobre tags não fechadas, tags de fechamento sem tag de abertura e chaves sem par, indicando linha e coluna. Se houver um comentário, texto entre aspas ou tag não encerrados, uma mensagem de erro aparecerá no lugar do resultado.

Não. Tudo acontece no seu navegador, sem envio ou armazenamento. Você pode abrir arquivos de até 2 MB: .html, .htm, .xhtml, .css ou .txt.

Mais alguma pergunta?

Contatar o suporte
Está criando um site?

Seu site precisa de hospedagem confiável

Um VPS da ZAP-Hosting mantém seu site online com confiabilidade.

4,4/5 Trustpilot32.000+ Servidores ativosDesde 2010
Ver hospedagem

Sem configuração. Sem riscos. Online em segundos.

Duração flexívelCancele a qualquer momentoOnline em 60 segundos

Procurando mais ferramentas? Ver todas as ferramentas para desenvolvedores