HTML Formatter
Understand HTML Formatter
Dieser Formatierer rückt HTML nach Verschachtelungstiefe ein oder kürzt es auf eine Zeile mit entfernten Kommentaren.
How it works
Das Markup wird in Tags, Kommentare und Textabschnitte zerlegt, und die Einrückungstiefe steigt bei jedem öffnenden Tag und fällt bei jedem schließenden. Void-Elemente (br, img, input, meta, link) öffnen nie eine Ebene, weil sie nichts zu schließen haben, und Inline-Elemente (a, span, strong, code und die übrigen) werden bewusst flach gehalten, damit ein Satz nicht in ein Wort pro Zeile zerfällt. Minify macht das Gegenteil: Kommentare werden entfernt und der Leerraum zwischen Tags wird zusammengefasst.
When to use it
- Den Quelltext einer Seite lesen, nachdem er minifiziert oder von einem Build-Werkzeug erzeugt wurde.
- Eine verschachtelte Komponente oder ein E-Mail-Template entwirren, um zu finden, wo ein div nicht geschlossen ist.
- Markup aufräumen, das aus einem WYSIWYG-Editor oder einem CMS-Feld eingefügt wurde.
- Die Struktur eines Fragments prüfen, bevor Sie es in ein Template einfügen.
Watch out for
- Leerraum zwischen Inline-Elementen wird dargestellt. </span> <span> zu </span><span> zusammenzufassen entfernt ein für den Leser sichtbares Leerzeichen, minifizierte Ausgabe ist optisch also nicht immer identisch.
- Dies ist ein Textdurchlauf, kein HTML-Parser. Inhalte in script, style, pre und textarea werden als gewöhnliches Markup behandelt, das Verschönern einer Seite rückt Codebeispiele und vorformatierten Text also neu ein, wo die Abstände Bedeutung tragen.
- Minify entfernt jeden Kommentar, auch bedingte Kommentare, auf die sich ein E-Mail-Template für ältere Outlook-Versionen stützt, und jede Markierung, die Ihre Werkzeuge auslesen.
- Unausgeglichene Tags erzeugen eine merkwürdige Einrückung statt eines Fehlers – eine Ausgabe, die stetig weiter nach rechts wandert, bedeutet meist, dass ein Tag nie geschlossen wurde.
Not the right tool for: HTML für den Produktivbetrieb zu minifizieren. Ein Minifier zur Build-Zeit parst das Dokument und weiß, welcher Leerraum sich gefahrlos entfernen lässt; erledigen Sie das in der Pipeline statt per Einfügen.
Frequently Asked Questions
Kann ich auch nur einen Ausschnitt statt eines ganzen Dokuments formatieren?
Ja – fügen Sie ein beliebiges Fragment ein (ein div, ein Teil-Template oder sogar ein einzelnes Element). Der Formatierer verlangt keine vollständige Struktur aus DOCTYPE, html, head und body.
Kommt das mit Jinja-, Handlebars- oder Mustache-Templates zurecht?
Template-Syntax ({{ }}, {% %}, {{{ }}}) bleibt unverändert erhalten, da der Formatierer sie als Textinhalt behandelt. Die HTML-Struktur um die Template-Tags herum wird normal formatiert.
Was ist der Unterschied zwischen HTML-Minifizierung und gzip?
Minifizierung entfernt Kommentare, Leerraum und optionale schließende Tags aus dem HTML-Quelltext und spart typischerweise 5–15 %. gzip komprimiert die minifizierte Ausgabe zusätzlich (meist 60–80 % mehr). Im Produktivbetrieb sollten beide zum Einsatz kommen – erst minifizieren, dann per Serverkomprimierung gzip.
How to Use HTML Formatter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.