Como usar
- Cole o HTML na caixa de entrada, abra um arquivo .html ou experimente o exemplo.
- Escolha Formatar para obter marcação indentada e legível ou Minificar para uma saída compacta.
- Ao formatar, escolha 2 espaços, 4 espaços ou tabulações e decida se os comentários serão mantidos.
- Copie o resultado ou baixe-o como um arquivo .html.
Como funciona
O formatador lê o HTML com um tokenizador tolerante, como um navegador faz, e o grava novamente. Ele nunca renderiza a entrada, portanto scripts no código colado não podem ser executados e nada é carregado da web.
A opção Beautify coloca cada elemento de bloco (div, p, ul, li, section, table, …) em sua própria linha, indentado pelo seu nível de aninhamento. Texto e elementos inline como a, b, em, span, code, img e br permanecem juntos na mesma linha, para que os espaços entre palavras e links não sejam alterados de forma a mudar a página renderizada. Sequências de espaços e quebras de linha no texto viram um único espaço, que é como os navegadores as exibem de qualquer forma.
O conteúdo dos elementos pre, textarea, script e style é copiado exatamente como foi escrito, incluindo espaços em branco e quaisquer caracteres < ou >. Elementos vazios como br, img, input, meta e link nunca recebem tag de fechamento. Tags autofechadas como <path /> em SVG inline são mantidas autofechadas.
A opção Minify reduz espaços em branco no texto a espaços únicos, remove espaços em branco ao lado de elementos de bloco, normaliza os espaços entre atributos e, se “Manter comentários” estiver desativada, remove comentários. Comentários condicionais são sempre mantidos.
A ferramenta não corrige HTML inválido, não adiciona tags ausentes, não reordena atributos nem minifica o CSS e o JavaScript dentro dos elementos style e script. Elementos deixados abertos são fechados no final do pai, e uma tag de fechamento sem tag de abertura correspondente é mantida como foi escrita.
Exemplos
Lendo marcação gerada
Um CMS gera um template como uma única linha longa. A opção Beautify com 2 espaços mostra a navegação, os itens de lista e o conteúdo principal como uma árvore indentada, enquanto “Preços incluem <strong>IVA</strong>.” permanece em uma linha legível.
Preparando um modelo de e-mail
Minifique um e-mail em HTML com os comentários desativados para reduzir seu tamanho. Um bloco <pre> com uma tabela de preços e o <style> inline são mantidos exatamente como estavam.
Verificando a estrutura
Quando um </div> de fechamento está ausente, a saída formatada mostra os elementos seguintes com um nível de indentação a mais, o que facilita ver onde o elemento deveria ter terminado.
Perguntas frequentes
Formatar o HTML altera a aparência da minha página?
Na maioria dos casos, não. Os espaços em branco dentro de elementos de bloco são colapsados e transformados em quebras de linha, que os navegadores ignoram. Texto e elementos em linha permanecem na mesma linha, e pre, textarea, script e style não são alterados. A exceção são páginas que dependem de CSS white-space: pre em elementos comuns.
Ele minifica o CSS e o JavaScript dentro da página?
Não. O conteúdo de script e style é mantido exatamente como foi escrito, então não pode quebrar. Use o formatador de CSS para minificar uma folha de estilos separadamente.
É seguro colar HTML de uma fonte desconhecida?
Sim. A entrada é tratada apenas como texto e nunca é inserida na página, então os scripts não são executados e as imagens ou links não são carregados.
Ele valida meu HTML?
Não. Ele é tolerante de propósito e formata marcação quebrada em vez de rejeitá-la. Tags de fechamento que não correspondem são mantidas, então a indentação ajuda a identificá-las, mas nenhuma lista de erros é gerada.
Privacidade
Seu HTML é processado somente no seu navegador e nunca é renderizado nem enviado. Nada é armazenado nem incluído em análises.