HTML online formatieren: HTML-Formatierer

Die formatierte Ausgabe

Der auf die obige Eingabe angewendete Formatierer erzeugt:

<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>

HTML-Formatierungsregeln

Blockelemente (div, section, header, main, footer, ul, ol, li, p, h1 bis h6, table, form) kommen in eigene Zeilen. Jedes Kind wird relativ zu seinem Elternteil eine Ebene eingerückt.

Inline-Elemente (a, span, strong, em, code, img) bleiben wenn möglich in derselben Zeile wie der umgebende Inhalt.

Void-Elemente (br, hr, img, input, meta, link) erhalten keine schließenden Tags.

Wann HTML-Formatierung wichtig ist

Templates in der Versionskontrolle, E-Mail-HTML, statische Site-Generatoren und serverseitiges Rendering-Debugging profitieren enorm von formatiertem HTML.

Formatierung in Komponenten-Frameworks

React JSX und Vue SFC verwenden eine Syntax, die wie HTML aussieht, es aber nicht ist. Für JSX/TSX ist Prettier das richtige Werkzeug.

Integration mit Prettier

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

Der Diff-Checker ist nützlich, um das Original mit dem verschönerten HTML zu vergleichen und sicherzustellen, dass kein Inhalt versehentlich geändert wurde.