Kostenloser HTML-Formatierer & Verschönerer

Was ist die HTML-Formatierung?

HTML-Formatierung (auch „Beautification" oder „Pretty-Printing" genannt) ist die Umkehrung der Minifizierung. Ein Formatierer nimmt HTML in jeder Form, minifizierte Produktionsausgabe, aus einem Browser-Inspektor kopiert und eingefügt, von einer Template-Engine generiert oder einfach unordentlich von Hand geschrieben, und gibt es mit konsistenter Einrückung, Zeilenumbrüchen zwischen Block-Elementen und einer vorhersagbaren visuellen Struktur wieder aus. Browser ignorieren den zusätzlichen Whitespace beim Parsen, also ändert die Formatierung, wie der Quellcode aussieht, aber nie, wie die Seite gerendert wird. Warum sich bemühen? Weil menschliche Augen eingerückte Hierarchie schneller verarbeiten als visuell flache Tag-Suppe. Code-Review, Debugging, Lernen der HTML-Struktur, Übergabe von Markup an einen anderen Entwickler, Vergleich zweier Versionen auf Änderungen, alles wird substanziell einfacher, wenn der Dokumentbaum aus der Einrückung visuell offensichtlich ist.

Die fünf realen Workflows, in denen ein Formatierer seinen Platz verdient: (1) minifiziertes Produktions-HTML aus „Quelltext anzeigen" eines Browsers oder „Outer HTML kopieren" der DevTools zurück in einen Debugger eingefügt; (2) HTML aus einem CMS-Textarea extrahiert, wo der WYSIWYG-Editor visuell saubere Ausgabe produzierte, aber unordentliche Quelle; (3) Debugging von Template-Engine-Ausgabe (Jinja, Twig, Handlebars, ERB), wo das gerenderte HTML nicht mit dem übereinstimmt, was Sie erwarteten; (4) Konvertierung von auto-generiertem HTML (aus React Server-Side Rendering, Pandoc, Dokumentkonvertern) in eine lesbare Form für Code-Review; (5) Aufräumen von E-Mail-Template-HTML, bevor es an eine Marketing-Plattform eingereicht wird, die Ihre Formatierung beim Import ausstreifen könnte.

Die wichtigsten HTML-Formatierer

js-beautify (Einar Lielmanis, ab 2007) ist der langjährige Formatierer des JavaScript-Ökosystems, behandelt HTML, CSS, JavaScript und JSON mit einer einzigen Bibliothek. Der HTML-Formatierer ist das, was die öffentliche Fassade von beautifier.io antreibt und was historisch Dutzende von „format HTML online"-Seiten unterstützt hat. Prettier (James Long, 2017) ist der meinungsstarke Formatierer, der das moderne Frontend-Ökosystem dominiert; HTML-Unterstützung kam kurz nach dem Launch. Prettiers Designphilosophie ist „fast keine Konfiguration", ein Einrückungsstil (standardmäßig 2 Leerzeichen), ein Zielzeilenbreite (printWidth: 80), ein Satz von Attribut-Wrapping-Regeln. Der Kompromiss ist Konsistenz zwischen Teams ohne Bikeshedding; der Preis ist weniger persönliche Flexibilität. HTML Tidy (Dave Raggett am W3C 1997, jetzt von HTACG gewartet) ist das Original, es geht der modernen Web-Formatierer-Szene voraus und wurde ursprünglich entworfen, um altes, kaputtes, veraltetes HTML aus den späten 1990er Jahren zu bereinigen. Tidy wird auf macOS immer noch standardmäßig ausgeliefert (/usr/bin/tidy) und auf den meisten Linux-Distributionen; weniger gebräuchlich 2026, aber immer noch für seine Strenge respektiert. In einem modernen Workflow ist Prettier der Standard für neue Projekte, integriert in VS Code (der Standardformatierer für HTML-Dateien), JetBrains IDEs und Pre-Commit-Hooks via Husky + lint-staged. Dieses Tool ist für die Fälle, in denen Sie keine Build-Pipeline haben, die Prettier ausführt, einfügen, formatieren, herauskopieren.

Einrückungskonventionen

Drei Einrückungsstile konkurrieren in modernem HTML. 2 Leerzeichen ist der moderne Web-Standard, verwendet von GitHubs HTML/CSS Style Guide, dem Google HTML/CSS Style Guide, Prettiers Standard, den WHATWG-Stilbeispielen und den meisten auf npm veröffentlichten Frontend-Paketen. Das Argument: HTML verschachtelt tief (eine typische Komponente kann 6-10 Einrückungsebenen haben), und 2 Leerzeichen verhindern, dass Zeilen über den rechten Rand einer 80-Spalten-Anzeige hinauslaufen. 4 Leerzeichen ist die ältere Java- / Microsoft-Tradition, die in einigen Legacy-Projekten und dem PSR-12-PHP-Standard überlebt; produziert visuell klarere Hierarchie auf Kosten von Horizontalplatz. Tabulatoren werden von der Linux-Kernel-Community, einigen Go-Projekten und Entwicklern bevorzugt, die argumentieren, dass Tab-Zeichen jedem Betrachter erlauben, seine eigene visuelle Breitenpräferenz festzulegen. Das „Tabs-vs-Leerzeichen"-Argument ist älter als die meisten Leser und nicht gewinnbar; die praktische Antwort ist, eines pro Projekt zu wählen und Ihren Formatierer es durchsetzen zu lassen. Dieses Tool bietet alle drei.

Inline- vs Block-Elemente, die Whitespace-Falle

Der größte einzelne Stolperstein bei der HTML-Formatierung ist die Unterscheidung zwischen Block-Level- und Inline-Elementen. Block-Elemente (<div>, <p>, <section>, <article>, <ul>) fließen als absatzartige Blöcke; der Whitespace zwischen ihnen wird als nichts Sichtbares gerendert, also kann ein Formatierer frei Zeilenumbrüche und Einrückung um sie herum hinzufügen. Inline-Elemente (<span>, <a>, <strong>, <em>, <code>) fließen innerhalb von Text; der Whitespace zwischen ihnen WIRD gerendert. Betrachten Sie <p>Hello <strong>world</strong>!</p>: das Leerzeichen zwischen „Hello" und dem öffnenden <strong> ist ein echtes Leerzeichen, das zwischen den Wörtern erscheinen wird. Wenn ein naiver Formatierer diese Zeile bricht und <strong> in seiner eigenen Zeile einrückt, gewinnt die gerenderte Ausgabe stillschweigend sichtbaren Whitespace und kann jetzt „Hello world" mit einem zusätzlichen Leerzeichen lauten. Schlimmer noch, Formatierer, die Whitespace zwischen Inline-Elementen entfernen, können benachbarte Wörter zusammenführen: „Helloworld" ohne Leerzeichen. Die Option „Inline-Tags bewahren" (hier standardmäßig aktiviert) sagt dem Formatierer, Inline-Elemente auf derselben Zeile wie ihr umgebender Text zu halten, das sichere Verhalten für das meiste reale HTML.

Geschützter Inhalt, pre, textarea, script, style

Vier HTML-Elemente haben Whitespace-signifikanten Inhalt, der nicht reformatiert werden darf: <pre> zeigt Text genau wie geschrieben einschließlich Zeilenumbrüchen und Leerzeichen an; <textarea>-Anfangsinhalt überlebt Whitespace; <script> enthält JavaScript, dessen Semantik von Whitespace abhängt (oder zumindest wo das Hinzufügen von Einrückung die Quelle korrumpieren würde); <style> enthält CSS, das von einem CSS-bewussten Formatierer reformatiert werden sollte, nicht von einem HTML-Formatierer. Produktions-HTML-Formatierer (Prettier, Tidy, js-beautify) erkennen diese Elemente und überspringen das Reformatieren ihres Inhalts. Ehrliche Offenlegung für dieses Tool: die Implementierung ist handgeschrieben statt eine Produktionsbibliothek zu umschließen, und die Inline-vs-Block- + geschützte-Inhalt-Handhabung ist konservativ, aber nicht perfekt fehlertolerant. Wenn Sie schweres Produktions-HTML durch sie laufen lassen und die Ausgabe innerhalb eines <pre>-Blocks falsch aussieht oder ein Skript bricht, ist die sicherere Option, Prettier lokal zu verwenden (es ist eine Ein-Befehls-Installation: npm install -g prettier, dann prettier --parser html input.html). Für gewöhnliches Template- und Komponenten-Ebenen-HTML behandelt dieses Tool die häufigen Fälle.

Attribut- und selbstschließende-Tag-Konventionen

HTML-Attribute haben ihre eigenen Formatierungsentscheidungen. Kurze Attributlisten passen auf eine Zeile (<a href="/de/about" class="link">); lange Listen wickeln eines pro Zeile, oft mit dem schließenden > in seiner eigenen Zeile. Prettiers printWidth: 80-Standard löst Wrapping aus, wenn eine Zeile 80 Zeichen überschreiten würde, was die moderne Konvention ist. Manche Teams erzwingen Attributreihenfolge (class zuerst, dann id, dann data-*, dann ARIA, dann Event-Handler); die meisten Formatierer respektieren die bestehende Attributreihenfolge, statt umzuordnen, da Umordnung das Verhalten in subtilen Fällen ändern kann (CSS-Spezifizität, JavaScript-Klassen-Lookups). Selbstschließende Tags: HTML5 erfordert den abschließenden Schrägstrich an Void-Elementen nicht (<br>, <hr>, <img>, <input>, <meta>, <link>, insgesamt 14 Void-Elemente in HTML5), aber XHTML und JSX schon (<br />). Formatierer bewahren entweder den Schrägstrich, wenn vorhanden, lassen ihn weg (HTML5-clean) oder fügen ihn hinzu (XHTML-friendly) je nach Konfiguration. Dieses Tool folgt der Eingabe, wenn Ihre Quelle <br /> verwendet, behält die Ausgabe ihn; wenn Sie <br> verwenden, behält die Ausgabe das.

Häufige Anwendungsfälle

• Code-Review · HTML aufräumen, bevor es mit Kolleginnen und Kollegen geteilt oder geprüft wird.
• Debugging · gut formatierter Code erleichtert das Erkennen fehlender Tags oder falscher Verschachtelung.
• Vorlagen-Bereinigung · von Vorlagen oder Build-Tools generiertes HTML neu formatieren.
• Übergabe an Entwicklerinnen und Entwickler · Code für andere Personen am selben Projekt lesbarer machen.
• Lernen · die HTML-Struktur besser verstehen, indem korrekte Einrückungsmuster sichtbar werden.
• E-Mail-Template-Inspektion. E-Mail-Template-Builder (Mailchimp, ConvertKit) produzieren oft Inline-Style-HTML, das schwer zu lesen ist; es zu formatieren macht die Struktur sichtbar, bevor Änderungen eingereicht werden.

Die moderne Pipeline, Prettier beim Speichern

Für Projekte mit einer Build-Pipeline ist der Standard 2026 Prettier, der beim Speichern in Ihrem Editor und bei jedem Commit via Pre-Commit-Hook läuft. VS Code liefert Prettier als Standard-HTML-Formatierer, wenn die Erweiterung installiert ist; auslösen mit Format Document (Shift+Alt+F auf Windows/Linux, Shift+Option+F auf macOS) oder "editor.formatOnSave": true in den Einstellungen aktivieren. JetBrains IDEs (WebStorm, IntelliJ) integrieren Prettier via Settings → Languages & Frameworks → JavaScript → Prettier. Pre-Commit-Hooks via Husky + lint-staged führen Prettier auf jeder gestagedten Datei aus, bevor sie den Commit erlauben, und stellen sicher, dass kein unformatiertes HTML das Repository erreicht. CI-Checks führen prettier --check auf Pull Requests aus, um Formatierungsdrift zu erkennen. Nichts davon zählt für einmalige Snippets, die von anderswo eingefügt wurden, genau dafür ist dieses In-Browser-Tool. Für langfristige Projektarbeit richten Sie Prettier ein; das In-Browser-Tool ist die reibungsfreie Option für alles andere.

Datenschutz: warum Browser-only hier zählt

HTML enthält oft Dinge, die Sie nicht von einem Dritten sehen lassen wollen: interne Admin-Tool-Templates, Markup von unveröffentlichten Produktseiten, A/B-Test-Varianten mit in Klassennamen offengelegten Experimenthypothesen, E-Mail-Templates mit personalisiertem Inhalt, Kunden-Dashboards mit PII in Platzhaltern. Serverseitige Formatierer laden Ihr HTML zu einem Drittdienst hoch, wo es in Logs sitzt. Dieses Tool läuft vollständig in Ihrem Browser per JavaScript, prüfen Sie im Network-Tab der DevTools beim Klick auf Format, oder schalten Sie die Seite nach dem Laden offline (Flugmodus), und der Formatierer funktioniert weiter. Sicher für unveröffentlichte Produkt-Templates, interne Admin-Seiten, A/B-Test-Varianten oder beliebiges HTML, das Sie nicht auf der Festplatte eines Fremden kopiert sehen wollen.

Häufige Fragen

Was ist HTML-Beautification?

Die HTML-Beautification formatiert Ihren Code so, dass er durch korrekte Einrückung und Zeilenumbrüche besser lesbar wird. Das erleichtert das Debuggen und Bearbeiten erheblich, ändert aber nicht, wie das HTML in Browsern gerendert wird.

Verändert die Formatierung das Aussehen meines HTML im Browser?

Nein. Die Formatierung fügt nur Leerräume und Einrückung hinzu. Browser ignorieren zusätzliche Leerräume in HTML. Ihr formatiertes HTML wird identisch zum Original gerendert.

Was sind Inline-Tags?

Inline-Tags (wie <span>, <a>, <strong>) fließen im Text und erzeugen keine Zeilenumbrüche. Die Option „Inline-Tags erhalten" verhindert, dass sie auf separate Zeilen gesetzt werden, und hält sie inline mit ihrem Inhalt.

2 Leerzeichen, 4 Leerzeichen oder Tabulatoren?

2 Leerzeichen ist der moderne Web-Standard, verwendet von GitHub, Google HTML/CSS Style Guide, Prettier, den WHATWG-Stilbeispielen und den meisten npm-Paketen. 4 Leerzeichen besteht in älteren Java- / Microsoft- / PHP-Traditionen. Tabulatoren werden vom Linux-Kernel und einigen Go-Projekten bevorzugt. Das Argument ist älter als die meisten Leser und nicht gewinnbar; die praktische Antwort ist, das anzugleichen, was Ihr Projekt bereits verwendet (oder die vorherrschende Team-Konvention), und einen Formatierer es durchsetzen zu lassen. Für ein einmaliges Snippet ohne Projektkontext ist 2 Leerzeichen der sicherste Standard 2026.

Sollte ich das verwenden, wenn ich bereits Prettier nutze?

Wahrscheinlich nicht, die Prettier-Integration Ihres Editors macht das beim Speichern, mit voller HTML-AST-Bewusstheit und der Geschützter-Inhalt-Handhabung, die Produktionsformatierer erfordern. Dieses Tool ist für die Fälle, die Ihre Build-Pipeline nicht abdeckt: HTML aus einem Browser-Inspektor eingefügt, Snippets aus E-Mail oder Chat, Template-Engine-Ausgabe, die Sie inspizieren wollen, einmalige Formatierung außerhalb jeglichen Projektkontexts. Für langfristige Projektarbeit richten Sie Prettier lokal ein; für reibungsfreie einmalige Arbeit hat dieses Tool die richtige Form.

Werden meine HTML-Dateien hochgeladen?

Nein. Die Formatierung läuft vollständig in Ihrem Browser per JavaScript. Das HTML, das Sie einfügen, überquert niemals das Netz, prüfen Sie im Network-Tab der DevTools beim Klick auf Format, oder schalten Sie die Seite nach dem Laden offline (Flugmodus) und das Tool funktioniert weiter. Sicher für unveröffentlichte Produkt-Templates, interne Admin-Seiten, A/B-Test-Varianten, E-Mail-Templates mit personalisiertem Inhalt oder beliebiges HTML, das Sie nicht auf der Festplatte eines Fremden kopiert sehen wollen.

Verwandte Tools