HTML-Formatierer
Läuft komplett in deinem Browser. Deine Dateien und Daten verlassen dein Gerät nie.
Über dieses Tool
Füge ein HTML-Dokument oder einen Ausschnitt ein, und dieses Tool formatiert es mit sauberer Einrückung oder komprimiert es auf eine einzige kompakte Zeile.
Was passiert bei fehlerhaftem Markup?
Nichts bricht ab. Der Formatierer nutzt js-beautify, das mit Tokens arbeitet statt einen strengen DOM-Baum zu parsen. Nicht geschlossene Tags, nicht zueinander passende schließende Tags oder Markup ohne <head> werden trotzdem eingerückt, statt einen Fehler auszulösen. Du kannst zwischen 2-Leerzeichen-, 4-Leerzeichen- und Tab-Einrückung wählen. Beim Minifizieren gilt dasselbe Prinzip: Es handelt sich um eine Reihe von Textdurchläufen, die Kommentare entfernen und Leerraum zwischen Tags zusammenziehen, ohne nicht geschlossenes oder schlecht verschachteltes Markup reparieren zu wollen. So oder so kannst du unsauberes HTML aufräumen, ohne vorher jedes kaputte Tag einzeln zu suchen.
Worauf das Minifizieren besonders achtet: den Inhalt von <pre>, <textarea>, <script> und <style> bleibt unangetastet. Leerraum innerhalb dieser Tags ist entweder bedeutungstragend (die Zeilenumbrüche in einem <pre>-Block) oder tatsächlicher Code, den ein Zusammenziehen kaputt machen könnte (inline JavaScript oder CSS). Das Tool überspringt diese Blöcke deshalb und rührt nur Leerraum zwischen normalen Tags an.
Wird davon irgendetwas hochgeladen?
Nein. Formatierung und Minifizierung laufen vollständig im Browser über die auf der Seite geladene Bibliothek js-beautify, nichts wird an einen Server gesendet. Seitenvorlagen, E-Mail-Markup oder gescrapte Ausschnitte mit echten Kundendaten können das Tool also durchlaufen, ohne deinen Rechner zu verlassen.
Wofür ist das nützlich?
Typische Fälle: eine minifizierte, per view-source gespeicherte Seite lesbar machen, die Dateigröße einer HTML-E-Mail-Vorlage vor dem Versand verkleinern, oder das Markup einer Komponente vor einem Code-Review auf eine einheitliche Einrückungsbreite bringen. Es funktioniert auch andersherum: Bei handgeschriebenem HTML mit uneinheitlichen Abständen liefert das Minifizieren in einem Schritt eine kompakte Zeile, die sich in einen Konfigurationswert oder ein data-*-Attribut einfügen lässt.
Zwischen den beiden Modi zu wechseln eignet sich auch, um zwei Versionen einer Seite zu vergleichen, denn Diff-Werkzeuge arbeiten mit einheitlich formatiertem Markup deutlich zuverlässiger als mit einem Mix aus Einrückungsstilen. Wer eine statische Website oder eine Komponentenbibliothek pflegt, hält den Code einheitlich, wenn generiertes oder kopiertes HTML vor dem Commit durch dieses Tool läuft, selbst wenn die Quellstücke aus unterschiedlichen Ecken stammen.