Unübersichtliches HTML in sauberes, eingerücktes Markup verwandeln

Füge beliebiges HTML ein – auch einzeilig minifizierte Ausgaben aus einer Build-Pipeline – und das Tool formatiert es mit sauberer Einrückung, einem Tag pro Zeile und einheitlichen Leerzeichen neu. Wähle eine Einrückung von 2, 4 oder 8 Leerzeichen. Die Ausgabe lässt sich direkt in deinen Editor übernehmen oder in einen Code-Review-Kommentar einfügen.

Prettify entzerrt HTML für bessere Lesbarkeit: jedes Tag in einer eigenen Zeile, verschachtelte Elemente eingerückt, Leerzeilen zwischen Abschnitten bleiben erhalten. Minify entfernt Kommentare, reduziert zusammenhängenden Leerraum und entfernt Zeilenumbrüche, sodass die Datei mit weniger Bytes auskommt. Nutze Prettify zum Bearbeiten und Prüfen, Minify für den Produktiveinsatz.

Nein – js-beautify (die Engine im Hintergrund) erkennt Script- und Style-Blöcke und formatiert deren Inhalte nach den passenden JS- bzw. CSS-Regeln, sodass Inline-Skripte gültig und Stylesheets lesbar bleiben. Selbstschließende Tags, leere Elemente und Attribute mit Namespace (svg:xmlns, xlink:href) werden alle korrekt behandelt.

Mit reinem HTML und HTML-ähnlichen Templates kommt es gut zurecht, doch reines JSX (Ausdrücke in geschweiften Klammern, Fragmente, großgeschriebene Komponenten-Tags) wird als HTML interpretiert und kann kleinere kosmetische Probleme aufweisen. Für Framework-spezifischen Code empfehlen wir Prettier mit einer auf Ihren Dialekt abgestimmten Konfiguration; für reines HTML, .htm und Template-Dateien ist unser Tool perfekt.

Es findet kein Upload statt. Der Formatierer läuft vollständig in deinem Browser mit js-beautify, sodass du interne Seitenvorlagen, E-Mail-Entwürfe oder HTML mit privaten Daten bedenkenlos einfügen kannst, ohne dass etwas dein Gerät verlässt.

Das Minifizieren entfernt HTML-Kommentare, reduziert jede Folge von Leerzeichen zwischen Tags auf ein einzelnes Leerzeichen und entfernt Zeilenumbrüche. Das Ergebnis ist HTML, das identisch dargestellt wird und in der Regel 10–30 % kleiner ist. In Kombination mit gzip auf dem Server verringert das auf inhaltsreichen Seiten das anfängliche Seitengewicht spürbar.

Ja – klicke auf „Herunterladen“, um die formatierte Ausgabe als output.html oder die minifizierte Ausgabe als output.min.html zu speichern. Die Datei ist UTF-8-codiert und funktioniert daher gleichermaßen mit englischen, kyrillischen, CJK- und rechtsläufigen Inhalten.

Es ist ein kleines, rein browserbasiertes Tool – ohne Hosting-Kosten – daher bieten wir es kostenlos als Teil unseres Entwickler-Toolkits an. Keine Werbung, kein Tracking der Ausgabe, keine Dateigrößenlimits außer dem, was Ihr Browser im Speicher halten kann.

Im Verschönern-Modus kannst du 2, 4 oder 8 Leerzeichen Einrückung wählen. Wähle die Breite, die dein Editor oder Code-Stil verwendet, kopiere dann das Ergebnis oder lade es als output.html herunter, damit die Formatierung direkt in dein Projekt übernommen wird.

Die Einrückungsauswahl (2, 4 oder 8 Leerzeichen) gilt nur im Modus „Verschönern“, da „Minimieren“ konstruktionsbedingt allen Leerraum und alle Zeilenumbrüche entfernt — es bleibt nichts zum Einrücken übrig. Wechseln Sie zurück zu „Verschönern“, damit die Einrückungsbreite wieder wirksam wird.

Während Sie einfügen oder bearbeiten, führt das Tool automatisch eine Strukturprüfung durch und listet alle nicht geschlossenen, nicht übereinstimmenden oder überzähligen schließenden Tags direkt unter dem Ausgabe-Panel auf — ganz ohne separate Schaltfläche. Eine grüne Meldung „Keine strukturellen Probleme gefunden“ bestätigt, dass das Markup wohlgeformt ist.

Nutze den Verschönern-Modus mit 2 Leerzeichen Einrückung – das ist die gängigste Konvention und hält Diffs kompakt – und prüfe dann das Panel für strukturelle Probleme, um sicherzugehen, dass kein Tag ungeschlossen geblieben ist. Nach der Prüfung wechselst du vor der Auslieferung in die Produktion in den Minify-Modus, um die zusätzlichen Leerräume wieder zu entfernen.

Ja – ziehen Sie eine .html-, .htm- oder .xhtml-Datei auf den Upload-Bereich oder klicken Sie zum Durchsuchen darauf, und ihr Inhalt wird direkt in das Eingabefeld geladen, genau als hätten Sie ihn eingefügt. Von dort aus funktionieren „Prettify“, „Minify“, die Einrückungsbreite und die Strukturprüfung identisch, egal ob das Markup aus einer Datei oder per Einfügen stammt.

Ja – sobald eine Ausgabe vorliegt, erscheint neben dem Ausgabepanel und dem primären Aktionsbereich eine Schaltfläche „Kopieren“. Ein Klick darauf kopiert das aktuelle Prettify- oder Minify-Ergebnis sofort in Ihre Zwischenablage (kurz wird „Copied!“ zur Bestätigung angezeigt), sodass Sie es direkt in Ihren Editor oder einen Code-Review-Kommentar einfügen können, ohne eine Zwischen-.html-Datei zu speichern.