Formate HTML em uma marcação legível e indentada, sem executá-lo.
O que ela faz
O HTML Formatter reescreve o código-fonte HTML para que a sua estrutura fique mais fácil de ler: os elementos aninhados recebem indentação e os atributos são escritos de forma consistente. O resultado é texto simples. Nada do seu HTML é executado, buscado nem exibido em pré-visualização: os scripts não rodam, e imagens, folhas de estilo, frames e links não são carregados.
Use quando o HTML chega em uma única linha comprida, ou quando uma marcação editada à mão tem indentação irregular e você quer ver como os elementos se aninham. Ele é um formatador, não uma ferramenta de correção: nunca corrige nem remove nada, e recusa a marcação que não consegue ler como bem formada.
O que ela aceita
- Uma página HTML inteira ou um fragmento, como alguns elementos ou apenas texto. Comentários, atributos e texto em outros idiomas são mantidos, e os doctypes também, exceto pelas pequenas mudanças listadas em “Nomes e aspas”.
- O resultado é sempre código-fonte em texto. Não há pré-visualização, então nada do seu HTML é executado nem carregado.
- O JavaScript dentro dos elementos script e o CSS dentro dos elementos style também são organizados, mas nunca executados, aplicados nem minificados. Se esse código tiver um erro de sintaxe, ou se o elemento guardar outra coisa, como dados JSON (<script type="application/ld+json">), um template ou TypeScript, o conteúdo é mantido exatamente como foi escrito.
- O conteúdo dos elementos pre e textarea é mantido como foi escrito.
- Valores de atributos, manipuladores de eventos inline como onclick, comentários e referências de caracteres como & e © ficam como estão.
- Indentação de 2 ou 4 espaços, nunca tabulações. As quebras de linha do resultado são sempre do mesmo tipo, qualquer que seja o do seu texto.
Bom saber
- HTML malformado é recusado, não corrigido. Uma tag de fechamento sem par, tags de fechamento fora de ordem, uma tag ou um valor de atributo que nunca termina e uma referência de caractere que o HTML não define, como &foo;, param a ferramenta no problema. Ela nunca corrige, completa nem remove marcação por você.
- Ele só formata. Não confere o seu HTML com o padrão HTML, não o otimiza e não remove nem reordena nada. Além da indentação e das quebras de linha, faz apenas as mudanças listadas a seguir.
- Espaços: uma sequência de espaços e quebras de linha no texto vira um único espaço ou quebra de linha, exceto dentro de pre e textarea. Onde elementos em linha ou texto se tocam sem espaço entre eles, nenhum é acrescentado. A ferramenta presume a exibição padrão de cada elemento, por exemplo que div, p e li são blocos e span, a e em são em linha. Se o seu próprio CSS mudar isso, uma quebra de linha que a ferramenta acrescenta entre dois elementos pode alterar o espaçamento na página.
- Nomes e aspas: os nomes dos elementos são escritos em minúsculas (DIV vira div), e os nomes de atributos padrão, como CLASS, também. Outros nomes de atributos, como onClick, mantêm as letras que você escreveu. Valores de atributos escritos sem aspas ganham aspas. Em um doctype, o nome html é escrito em minúsculas (<!DOCTYPE HTML> vira <!DOCTYPE html>), e em um doctype antigo com identificadores public ou system cada sequência de espaços em branco vira um único espaço. <!DOCTYPE html> e <!doctype html> ficam exatamente como foram escritos.
- Elementos vazios, como br, img e input, são escritos com uma barra de fechamento, por exemplo <br />, e as tags de fechamento que o HTML permite omitir, como </li> e </p>, são escritas por inteiro.
- Uma quebra de linha logo depois da tag de abertura de pre ou textarea pode ser acrescentada ou removida. O HTML ignora essa primeira quebra de linha, então o conteúdo é o mesmo.
- O HTML minificado é espalhado onde isso é seguro: elementos de bloco, como div, p, ul e li, começam cada um em sua própria linha. Elementos em linha e texto que se tocam ficam juntos, então uma sequência deles pode continuar em uma só linha comprida.
- Um > ainda pode ficar no início de uma linha, mas só em um caso: uma sequência longa de elementos em linha ou de texto sem espaço entre eles, que a ferramenta não consegue quebrar em um espaço. A quebra vai então para dentro de uma tag, o que deixa o > de uma tag no início da linha seguinte. O texto continua sendo HTML comum e significa a mesma coisa.
- Se a indentação deixasse o resultado muito maior que o limite de tamanho, a ferramenta para antes de formatar. Use 2 espaços ou menos aninhamento.
Como usar
- Cole ou digite o seu HTML na caixa de entrada. Pode ser uma página inteira ou apenas alguns elementos. Nada é executado enquanto você digita.
- Escolha a indentação (“2 espaços” ou “4 espaços”) e aperte “Formatar”.
- Leia o resultado ao lado da entrada. Ele aparece como texto, nunca como uma página renderizada. Se o seu HTML for recusado, a mensagem diz onde está o problema.
- Aperte “Copiar” para colocar o resultado na área de transferência, ou “Baixar” para salvá-lo como formatted.html.
Exemplos
Formatar uma marcação com quebras de linha
Cole este HTML e aperte “Formatar” com “2 espaços” selecionado. O nome da tag DIV é escrito em minúsculas, o valor card, que estava sem aspas, ganha aspas, a sequência de espaços no parágrafo vira um único espaço e a tag img ganha uma barra de fechamento. As suas quebras de linha entre os elementos são mantidas, então cada elemento fica em uma linha própria, com indentação.
<DIV class=card>
<h1>Title</h1>
<p>Some text with <em>emphasis</em>.</p>
<img src=logo.png>
</DIV><div class="card">
<h1>Title</h1>
<p>Some text with <em>emphasis</em>.</p>
<img src="logo.png" />
</div>
Uma tag de fechamento sem nada para fechar
O </span> de fechamento não tem um <span> de abertura antes dele. A ferramenta não adivinha nem corrige a marcação, então recusa, diz onde está o problema e não mostra nenhum resultado.
<div>
<p>Hello</p>
</span>O HTML não está bem formado neste ponto. Por exemplo: uma tag de fechamento sem a tag de abertura correspondente, uma tag ou um valor de atributo que nunca termina, ou uma referência de caractere desconhecida, como &foo;. O HTML nunca é corrigido automaticamente, então corrija a marcação e execute a ação novamente.
Linha 3, coluna 1
Tags sem nada entre elas
Esta lista não tem espaços nem quebras de linha entre as tags. Elementos de bloco, como ul e li, podem começar cada um em sua própria linha sem mudar a aparência da página, então a ferramenta dá a cada um uma linha própria, com indentação. Elementos em linha, como em ou a, são diferentes: um espaço entre dois deles pode aparecer na página, então a ferramenta nunca coloca um.
<ul><li>Tea</li><li>Coffee</li></ul><ul>
<li>Tea</li>
<li>Coffee</li>
</ul>
Scripts e texto pré-formatado
O conteúdo de pre é mantido exatamente como foi escrito, então a indentação de “line 2” não muda. O JavaScript dentro de script é organizado como código: “let a=1;” vira “let a = 1;” e recebe indentação sob a sua tag. O CSS dentro de style é organizado do mesmo jeito, e nada é executado nem aplicado.
<div>
<pre>
line 1
line 2</pre>
<script>
let a=1;
</script>
</div><div>
<pre>
line 1
line 2</pre>
<script>
let a = 1;
</script>
</div>
Limites e privacidade
Limites de tamanho
- Entrada: até 2.000.000 bytes de texto em UTF-8 (cerca de 2 MB). Letras acentuadas e emojis ocupam mais de um byte cada. Uma entrada maior é recusada.
- Resultado: também até 2.000.000 bytes. Se o resultado completo fosse maior, a ferramenta mostra apenas uma prévia incompleta dos primeiros 100.000 bytes, e essa prévia não pode ser copiada nem baixada.
- Aninhamento: até 128 níveis de elementos (uma raiz é o nível 1; elementos com autofechamento e elementos vazios também contam) dentro uns dos outros. Um HTML mais profundo é recusado porque passa do que a ferramenta processa.
- Tempo: uma execução que demora mais que o seu limite de tempo é interrompida. Tente uma entrada menor.
Sua privacidade
O texto que você digita ou cola, ou abre de um arquivo local, é processado localmente no seu navegador, em um Web Worker dedicado. Ele nunca é enviado para o servidor (um arquivo que você abre é lido apenas no seu navegador) e não é gravado em armazenamento, cookies nem na barra de endereços.
“Copiar” coloca o resultado na área de transferência e “Baixar” o salva como arquivo, mas só quando você aperta o botão. O arquivo é criado no seu navegador, então nada é enviado.
Para ver os detalhes completos, consulte a Política de Privacidade
Ferramentas e páginas relacionadas
O seu texto continua na página quando você troca de ferramenta na mesma aba, então dá para testar o mesmo texto em outra. Recarregar ou fechar a aba o encerra.