Formatar HTML Online: Formatador de HTML

A Saída Formatada

O formatador aplicado à entrada acima produz:

<div class="container">
  <header class="header">
    <nav>
      <a href="/" class="logo">DevBento</a>
      <ul class="nav-list">
        <li><a href="/tools">Tools</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="hero">
      <h1>Developer Tools</h1>
      <p>Free, privacy-first tools that run in your browser.</p>
      <a href="/tools" class="cta-button">Get Started</a>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 DevBento</p>
  </footer>
</div>

Regras de Formatação HTML

Elementos block (div, section, header, main, footer, ul, ol, li, p, h1 a h6, table, form) ficam em suas próprias linhas. Cada filho é indentado um nível relativo ao seu pai.

Elementos inline (a, span, strong, em, code, img) permanecem na mêsma linha do conteúdo ao redor quando possível.

Elementos void (br, hr, img, input, meta, link) não recebem tags de fechamento.

Quando a Formatação HTML Importa

Templates em controle de versão, HTML de e-mail, geradores de site estático e depuração de renderização server-side se beneficiam enormemente de HTML formatado.

Formatação em Frameworks de Componentes

React JSX e Vue SFC usam sintaxe que parece HTML mas não é. Para JSX/TSX, Prettier é a ferramenta correta.

Integração com Prettier

npx prettier --write "**/*.html"

O diff checker é útil para comparar o original é o HTML embelezado para verificar que nenhum conteúdo foi alterado acidentalmente.