Formatar HTML
Esta ferramenta reindenta e minifica marcação no seu navegador. HTML não é XML, e formatá-lo como se fosse corrompe documentos de quatro maneiras específicas — elementos void, elementos de texto puro, tags de fechamento opcionais e espaços em branco significativos entre elementos inline — e esta ferramenta trata cada um deles explicitamente.
Como funciona o Formatar HTML?
A maioria dos formatadores de HTML são formatadores de XML com outro nome, e cada uma das quatro diferenças entre os dois já produziu um bug de verdade.
Elementos void não abrem um escopo
<br>, <img>, <input>, <hr> e outros dez não têm tag de fechamento — não é opcional: não têm mesmo. Um formatador que aumenta a indentação em toda tag de abertura empurra tudo o que vem depois do primeiro <img> um nível para a direita e nunca se recupera, então uma página com vinte imagens acaba indentada para fora da tela.
Script e style contêm texto, não marcação
Um < dentro de um <script> é um sinal de menor. Interpretá-lo como uma tag é como if (a < b) vira um documento deturpado, e é por isso que o exemplo acima contém exatamente essa expressão. O conteúdo de <script>, <style>, <textarea> e <title> é consumido inteiro, até a tag de fechamento correspondente.
O espaço em branco entre elementos inline é renderizado
<b>a</b> <i>b</i> é renderizado como “a b”; sem o espaço, é renderizado como “ab”. Um formatador que põe cada elemento em sua própria linha inseriu um espaço em cada fluxo de texto do documento — o sintoma clássico é um espacinho sobrando antes de cada ponto final e depois de cada link. Por isso os elementos inline são mantidos em uma sequência em buffer, e só elementos de bloco iniciam linhas. A mesma regra é o motivo de o conteúdo de <pre> nunca ser reindentado: ali, o espaço em branco é o layout.
As tags de fechamento são opcionais para vários elementos
</li>, </p>, </td> e companhia podem ser omitidas, e muita HTML escrita à mão as omite. Um formatador com uma pilha de tags rigorosa ou rejeita o documento ou desequilibra a indentação dele. Aqui, a pilha se desfaz por elementos cujo fechamento é opcional quando encontra uma tag de fechamento que não corresponde ao topo.
O que a análise sinaliza
Um <img> sem atributo alt é sinalizado, porque um leitor de tela recorre a anunciar o nome do arquivo — o que é pior que o silêncio, e é por isso que uma imagem decorativa precisa de alt="" em vez de nenhum atributo. Elementos não fechados são nomeados: o navegador vai se recuperar, mas onde ele decide fechá-los é uma escolha dele, não sua, e as duas frequentemente divergem.
Entrada
<div><br><p>text</p></div>
Formatado
<div>
<br>
<p>
text
</p>
</div>Quais opções e casos-limite o Formatar HTML suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| Indentação | espaços | 2 | Por nível de aninhamento. Elementos vazios não adicionam um nível. |
| Quebra de atributos | quantidade | 4 | Tags com pelo menos esta quantidade de atributos, ou mais longas que 100 caracteres, colocam cada atributo em uma linha separada. |
| Preservar texto bruto | booleano | ativado | O conteúdo de pre e textarea nunca é alterado, porque seu espaço em branco é renderizado. Corpos de script e style são reindentados, o que é seguro. |
| Elementos vazios | 14 elementos | — | area base br col embed hr img input link meta param source track wbr. Nenhum deles abre um escopo. |
| Elementos de texto bruto | script, style, textarea, title, pre | — | O conteúdo é texto em vez de marcação. Um < dentro de um script é um sinal de menor que, e analisá-lo como uma tag corrompe o documento. |
| Elementos inline | mantidos no fluxo | — | a, b, span, em, img e os outros permanecem na linha em que estavam, porque uma quebra de linha entre eles é renderizada como um espaço. |
| Fechamento opcional | tolerado | — | li, p, td, tr, option e outros podem omitir sua tag de fechamento. A pilha é desfeita em vez de rejeitar o documento. |
| Aspas de atributos | normalizado | duplas | A menos que o valor contenha uma aspa dupla, caso em que aspas simples são usadas. Atributos booleanos mantêm sua forma sem aspas. |
| Minificar | espaço em branco | — | Colapsa sequências de espaços em branco, mas mantém um único espaço onde elementos inline se encontram, e preserva o conteúdo de pre. Comentários condicionais sobrevivem porque são marcação para IE antigo. |
Perguntas frequentes
Por que meu elemento inline não fica em sua própria linha?
Porque colocá-lo lá mudaria o que a página renderiza. <b>a</b> <i>b</i> mostra "a b"; sem o espaço entre as tags, mostra "ab". Um formatador que quebra cada elemento em sua própria linha insere um espaço em cada fluxo de texto do documento, e o sintoma é um espacinho sobrando antes de cada ponto final. Os elementos inline ficam na sequência em que estavam.
Por que o conteúdo do meu <pre> foi deixado intacto?
Porque em um <pre> o espaço em branco é o conteúdo. Reindentá-lo muda o que o leitor vê, o que é o oposto de formatar. O mesmo vale para <textarea>, em que o espaço em branco é o valor do campo. Corpos de script e style são reindentados, porque o espaço em branco deles não é renderizado.
Meu HTML não tem tags </li> de fechamento. Isso está quebrado?
Não — o HTML permite omitir a tag de fechamento de li, p, td, tr, option, thead e vários outros, e muita marcação escrita à mão omite. O formatador desfaz sua pilha quando encontra uma tag de fechamento que não corresponde ao topo, então o documento é formatado corretamente. Se você deve omiti-las é uma questão de estilo; se o parser lida com elas, não.
Por que ele avisa sobre um atributo alt ausente?
Porque um <img> sem alt faz o leitor de tela anunciar o nome do arquivo — "i-m-g underscore 4 0 2 1 dot p-n-g" — o que é pior do que não dizer nada. A correção para uma imagem decorativa é alt="", que diz explicitamente à tecnologia assistiva para pular a imagem. Um atributo ausente e um atributo vazio significam coisas diferentes, e só um deles é o correto para decoração.
Devo minificar HTML?
Só como parte de um build, e o ganho é menor do que você imagina quando gzip ou brotli entram em cena — a compressão já lida muito bem com espaços em branco repetidos. A minificação é genuinamente boa para templates de e-mail, em que alguns clientes rejeitam mensagens grandes, e para CSS crítico inline, em que os bytes estão no caminho crítico.
Minha marcação é enviada?
Não. A tokenização e a formatação rodam no seu navegador, o que você pode conferir no painel Network. Marcação de uma aplicação real frequentemente carrega atributos de dados, URLs internas e JSON inline com conteúdo de verdade dentro.