Formatador de HTML

Embeleze HTML com o Prettier: indentação consistente, um elemento por linha e CSS e JavaScript embutidos também formatados. Escolha 2, 4 espaços ou tabulação.

Indentação

Entrada HTML

Saída

Executa totalmente no seu navegador. Seus dados nunca são enviados.

Ferramentas Relacionadas

Ver Todas

Formatador de JSON Validador de JSON Formatador de XML camelCase snake_case kebab-case PascalCase CONSTANT_CASE

O que é Formatador de HTML?

O Formatador de HTML reescreve o HTML com indentação limpa e consistente usando o Prettier, o formatador usado pela maioria dos projetos de front-end. Blocos <style> e <script> em linha também são formatados como CSS e JavaScript.

Como usar Formatador de HTML

Cole seu HTML na caixa de entrada ou clique em Carregar exemplo.
Escolha a Indentação.
Clique em Formatar (a saída também é atualizada enquanto você digita).
Copie ou baixe o resultado.

Exemplo

Entrada

<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>

Saída

<div>
  <p>Hi<b>x</b></p>
  <img src="a.png" alt="" />
</div>

Quando usar Formatador de HTML

Use-o para limpar HTML de exportações de CMS, templates de e-mail ou marcação gerada antes de editar ou revisar. Ele é um formatador, não um validador: para tags não fechadas ou ids duplicados, use o Validador de HTML. Documentos muito grandes podem demorar um pouco porque o Prettier roda no seu navegador.

Como funciona Formatador de HTML

O código é formatado com o Prettier 3 (build standalone) e seus plugins de HTML, CSS e Babel, carregados sob demanda. O Prettier lê a marcação em uma árvore e a imprime de modo que as linhas caibam em 80 colunas, colocando aspas nos atributos e adicionando /> em elementos vazios. Elementos em linha sensíveis a espaços são mantidos juntos para que a página renderizada não mude. Erros de sintaxe são informados com a linha e a coluna do Prettier.