HTML-Formatierer – HTML online kostenlos verschönern und verkleinern

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 – der Formatierer erkennt script- und style-Blöcke und formatiert deren Inhalt nach den passenden JS- oder CSS-Regeln. Dadurch bleiben Inline-Skripte gültig und Stylesheets lesbar. Selbstschließende Tags, leere Elemente und Attribute mit Namensraum (svg:xmlns, xlink:href) werden korrekt verarbeitet.

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 Ihrem Browser. Sie können daher interne Seitenvorlagen, E-Mail-Entwürfe oder HTML mit privaten Daten einfügen, ohne dass etwas Ihr 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.

Nein – HTML Prettify läuft vollständig in Ihrem Browser, sodass das, was Sie einfügen, niemals den Computer verlässt, auf dem Sie sich befinden. Das ist wichtig, wenn Sie etwas überprüfen, das einen Token, einen Schlüssel oder Kundendaten enthält. Zum Löschen reicht es aus, die Registerkarte zu schließen.

Der Fehler weist auf die erste Position hin, die nicht analysiert werden konnte, die normalerweise direkt nach dem eigentlichen Fehler liegt und nicht darauf – ein fehlendes Komma, ein nicht geschlossenes Zitat oder eine offene Klammer oder ein aus einem Dokument eingefügtes statt eines geraden Zitats. Überprüfen Sie zunächst die Zeile über der gemeldeten Position.

Nein zu beidem. HTML Prettify ist kostenlos, Ihr Download trägt kein Wasserzeichen und am Ende wird nichts abgefragt – es gibt keinen Punkt im Ablauf, an dem Sie die Arbeit beenden und dann feststellen, dass sie Geld kostet.

Nein – HTML Prettify läuft im Browser auf Desktop und Smartphone. Sie müssen nichts installieren, keine Testversion starten und keine Lizenz kaufen, bevor Sie prüfen können, ob das Tool Ihre Aufgabe löst. Verwenden Sie dafür Ihre eigene Datei statt eines Beispiels.