Utilia
Categorias ▾
Idioma: pt ▾

Formatador de HTML

Formata HTML desarrumado com uma indentação limpa, ou minifica-o em segurança, no teu navegador. O CSS e o JavaScript embutidos também são formatados.

Como formatar HTML

  1. Cola o teu HTML ou clica em Abrir um ficheiro para carregar um ficheiro .html ou .htm (até 10 MB).
  2. Escolhe a Indentação (2 espaços, 4 espaços ou uma tabulação) e, em Quebrar linhas aos, 80 ou 120 caracteres, ou Sem quebra.
  3. Marca Indentar e se os quiseres indentados dentro de <html>, e Remover comentários para eliminar os comentários <!-- … -->.
  4. Clica em Formatar (embelezar) para obteres código legível, ou em Minificar para obteres a versão segura mais pequena.
  5. Copia ou transfere o resultado. A linha de estado mostra o tamanho antes e depois.

O resultado é mostrado como texto simples na caixa de saída. O teu HTML nunca é renderizado nem executado nesta página, por isso os scripts do código que colas não conseguem fazer nada.

Formatar: HTML legível e com indentação coerente

Formatar (embelezar) usa o js-beautify, o formatador por trás de muitos editores de código:

  • os elementos de bloco ficam em linhas próprias, indentados conforme a profundidade de aninhamento, enquanto os elementos inline como <a>, <b> ou <span> ficam dentro do texto;
  • o conteúdo de <script> e <style> é formatado como JavaScript e CSS;
  • <pre> e <textarea> ficam exatamente como foram escritos, porque os espaços são visíveis;
  • as linhas em branco consecutivas são reduzidas a uma;
  • com uma largura de quebra, as linhas longas de texto e as listas longas de atributos são quebradas.

Formatar não corrige marcação estragada: um <div> por fechar continua por fechar, e a indentação que vem a seguir mostra onde está o problema.

Minificar: HTML mais pequeno sem mudar a página

Minificar segue uma abordagem deliberadamente conservadora:

  • as sequências de espaços, tabulações e quebras de linha no texto passam a um único espaço, tal como o navegador as mostra;
  • os espaços junto a elementos de bloco e do cabeçalho (<div>, <p>, <li>, <td>, <meta>, <br>…) são removidos, porque nunca são apresentados;
  • é mantido um único espaço entre elementos inline, para que <b>big</b> <i>world</i> não se transforme em «bigworld»;
  • os comentários são removidos quando Remover comentários está marcado, exceto os comentários condicionais (<!--[if IE]>) e os que começam por <!--!;
  • o conteúdo de <script>, <style>, <pre> e <textarea> nunca é tocado, e os valores dos atributos são mantidos exatamente, aspas incluídas.

Não remove etiquetas de fecho opcionais, não reescreve atributos nem comprime o JavaScript e o CSS embutidos: essas otimizações poupam um pouco mais, mas podem estragar páginas. Na maioria das páginas, a compressão HTTP (gzip ou Brotli) poupa muito mais do que qualquer minificador, por isso a minificação é sobretudo útil para HTML incluído em emails, modelos ou strings JavaScript.

Perguntas frequentes

O meu código é enviado?

Não. A formatação e a minificação correm no teu navegador; o teu código nunca sai do teu computador.

Porque é que a minha página ficou diferente depois de minificar?

Em casos normais, não deveria. A única exceção é o CSS que muda a forma como os espaços são mostrados, por exemplo white-space: pre num elemento que não seja <pre> nem <textarea>, ou um elemento cujo display foi mudado de bloco para inline: os espaços reduzidos passam aí a ser visíveis.

O formatador valida o meu HTML?

Não. Formata o que lhe dás. Para verificar se a marcação é válida, usa um validador como o W3C Nu HTML Checker.

Posso formatar modelos Vue, Svelte ou Django?

Na maior parte dos casos. As etiquetas de modelo dentro do texto e dos atributos são mantidas, mas uma sintaxe de modelos complexa pode baralhar a indentação, por isso verifica o resultado.

O que muda a opção «Indentar <head> e <body>»?

Por omissão, <head> e <body> começam ao mesmo nível que <html>, uma convenção comum que poupa um nível de indentação. Marca a opção para os indentares um nível mais.

Ferramentas relacionadas