Formatador HTML

O que é formatação HTML?

Um formatador HTML é uma ferramenta que realiza a formatação de HTML (também chamada de embelezamento ou pretty-printing): adiciona indentação consistente, quebras de linha e espaçamento à marcação HTML para que sua estrutura de aninhamento fique visível. Os navegadores ignoram espaços em branco ao renderizar HTML, portanto um documento escrito em uma única linha produz o mesmo resultado que um com indentação cuidadosa. A diferença é inteiramente para os humanos: HTML formatado é mais fácil de ler, depurar e manter.

A especificação HTML (mantida pelo WHATWG como o HTML Living Standard) define mais de 110 elementos, cada um com seu próprio modelo de conteúdo. Elementos de bloco como <div>, <section> e <article> geralmente começam em uma nova linha e indentam seus filhos. Elementos vazios como <br>, <img> e <input> não têm tag de fechamento nem filhos para indentar. Um bom formatador entende essas distinções e aplica regras de indentação adequadamente, em vez de simplesmente adicionar espaços em branco após cada tag.

A formatação é mais importante durante o desenvolvimento. HTML minificado ou gerado por máquina, saída de plataformas CMS e marcação copiada das DevTools do navegador frequentemente chegam como uma única linha densa. Sem indentação adequada, encontrar uma tag de fechamento ausente ou rastrear uma estrutura profundamente aninhada demora muito mais. Um formatador HTML transforma essa parede de texto em uma árvore devidamente indentada e legível em um único passo.

Por que usar este Formatador HTML?

Cole qualquer HTML e obtenha saída devidamente indentada instantaneamente. Sem plugins para instalar, sem arquivos de configuração para escrever, sem contas para criar.

Casos de uso do Formatador HTML

Regras de Indentação HTML

Como um formatador HTML trata cada tipo de elemento depende do seu modelo de conteúdo. A tabela abaixo mostra elementos comuns e como são indentados com configurações de 2 e 4 espaços. Ambos produzem renderização idêntica no navegador; a diferença é a legibilidade.

Formatador vs. Minificador vs. Linter

Essas três ferramentas operam em HTML mas servem a propósitos diferentes. Formatação e minificação são transformações opostas; linting verifica erros sem alterar os espaços em branco.

Exemplos de Código

Como formatar HTML programaticamente em linguagens e ferramentas populares:

import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>

from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>

package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}

# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

Perguntas Frequentes