Como usar o formatador de HTML
- Cole o seu HTML na caixa de entrada: uma página completa, um template ou um trecho copiado das ferramentas de desenvolvedor do navegador.
- Clique em Formatar para recuar a marcação de modo que cada elemento aninhado fique em sua própria linha.
- Clique em Minificar para remover comentários e espaços desnecessários e obter um arquivo menor.
- Copie o resultado de volta para o seu editor ou CMS.
O formatador funciona inteiramente no seu navegador. A sua marcação não é enviada nem armazenada e é tratada como texto: nada do que você colar é executado.
Por que formatar HTML?
O HTML produzido por construtores de páginas, editores de e-mail, exportações de CMS e ferramentas de build costuma estar minificado ou mal recuado. Para os navegadores isso não é problema, mas dificulta o acompanhamento da estrutura por pessoas. O HTML formatado mostra a árvore do documento com clareza, para que você veja onde cada <div> fecha, encontre um elemento fora do lugar e revise alterações em um diff.
A minificação faz o caminho inverso. Remover comentários, recuos e quebras de linha deixa o arquivo menor, o que reduz um pouco o tamanho da transferência. Na maioria dos sites, a compressão do servidor (gzip ou Brotli) já reduz bastante o HTML, então a minificação traz um ganho extra menor, mas ainda é comum em builds de produção.
Problemas comuns de HTML e como corrigi-los
Os navegadores são tolerantes: o algoritmo de análise do HTML se recupera da maioria dos erros em vez de falhar. Isso é conveniente, mas significa que uma marcação quebrada muitas vezes é exibida "quase certa" e causa bugs de layout confusos. Formatar o código torna esses problemas mais fáceis de ver.
Elementos sem fechar. Quando o recuo continua se deslocando para a direita e nunca volta, provavelmente um elemento não foi fechado:
<div class="card">
<div class="card-body">
<p>Hello
</div>O único </div> fecha o card-body (e encerra implicitamente o parágrafo), então o card externo continua aberto e engole tudo o que vem depois. Feche todos os elementos explicitamente:
<div class="card">
<div class="card-body">
<p>Hello</p>
</div>
</div>Elementos de bloco dentro de elementos inline ou dentro de <p>. Um <div> dentro de um <p> não é permitido: o navegador fecha o parágrafo mais cedo, e o seu CSS deixa de funcionar como esperado.
Tags aninhadas incorretamente. <b><i>text</b></i> deveria ser <b><i>text</i></b>. Os elementos internos devem fechar antes dos externos.
IDs duplicados. Um id deve ser único no documento. Duplicatas quebram o getElementById, as associações de rótulos e as âncoras da página.
Elementos void e espaços em branco
Alguns elementos nunca podem ter conteúdo e não têm tag de fechamento. Esses elementos void são:
| Elementos void |
|---|
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr |
No HTML, <br> e <br /> são equivalentes; a barra final é opcional. Escrever </br> ou <img></img> é um erro.
O espaço em branco entre elementos inline pode ser visível. Dois botões inline-block separados por uma quebra de linha mostram um pequeno espaço, enquanto os mesmos botões na mesma linha não mostram. Um bom formatador preserva exatamente o conteúdo de <pre> e <textarea>, mas, se o layout mudar um pouco depois de formatar ou minificar, o espaço em branco inline costuma ser a causa.
Dicas e boas práticas
- Recue com dois espaços; um HTML muito aninhado fica larguíssimo com quatro.
- Mova blocos grandes de
<style>e<script>inline para arquivos separados e organize-os com o formatador de CSS e o formatador de JavaScript. - Minifique como parte do seu build, e não à mão, para que o código-fonte legível permaneça no controle de versão.
- Depois de publicar, verifique o SEO da página com o verificador de SEO e o tempo de carregamento com o teste de velocidade de sites.
Perguntas frequentes
Formatar muda a aparência da minha página?
Em geral, não. Adicionar recuo entre elementos de bloco não tem efeito visível. O espaço em branco entre elementos inline pode criar ou remover pequenos espaços, então confira as páginas com layouts inline justos depois de formatar.
Isto é um validador de HTML?
Não. Ele recua e minifica a marcação, mas não a confere com a especificação do HTML. Em compensação, a formatação torna muitos erros estruturais fáceis de ver a olho nu.
HTML minificado é melhor para SEO?
Os mecanismos de busca leem HTML minificado e formatado igualmente bem. A minificação pode deixar as páginas um pouco menores, o que ajuda um pouco no desempenho, mas conteúdo, estrutura e velocidade importam muito mais do que espaços em branco.
Posso formatar templates de e-mail em HTML?
Sim. O HTML de e-mail costuma depender de tabelas aninhadas e estilos inline, e formatá-lo facilita muito a edição. Depois, teste o resultado na sua plataforma de e-mail, pois alguns clientes de e-mail são sensíveis a espaços em branco.
Atualizado