HTML-Formatierer

Formatiert und verschönert HTML, auch Tailwind-Klassenlisten.

Über dieses Tool

Formatiert und verschönert HTML: jede Verschachtelungsebene wird eingerückt, kurze Elemente bleiben in einer Zeile, <pre>-, <script>- und <style>-Blöcke bleiben unverändert. Ungültiges Markup wird nicht repariert; Validatoren bleiben nötig.

So nutzen Sie es

Fügen Sie das komprimierte Markup ein, starten Sie die Formatierung und kontrollieren Sie, ob alle Tags weiterhin paarweise schließen, bevor Sie im Editor weiterarbeiten.

Beispiel

Das Beispiel ist ein kompakter Hero-Block in einer einzigen Zeile.

Eingabe

<section class="hero"><h1>CSS to Tailwind</h1><p>Convert utilities in the browser.</p><a href="/">Open</a></section>

Ausgabe

<section class="hero">
  <h1>CSS to Tailwind</h1>
  <p>Convert utilities in the browser.</p>
  <a href="/">Open</a>
</section>

Tipp

Springt die Einrückung unerwartet nach rechts, fehlt im Original meist ein schließendes Tag.

Gut zu wissen

Ist ein HTML-Beautifier etwas anderes als ein HTML-Formatierer?

Nein. Beide rücken verschachteltes Markup neu ein, daher deckt diese Seite beide Suchanfragen mit einem Tool ab.

Was bleibt unangetastet, und repariert es ungültiges HTML?

Inhalte in <pre>, <textarea>, <script> und <style> bleiben exakt wie geschrieben. Das Tool rückt nur ein: nicht geschlossene oder falsch verschachtelte Tags bleiben bestehen, nutzen Sie bei Bedarf einen Validator.

Chrome-Erweiterung