HTML formatieren oder minifizieren
Kostenloser Online-HTML-Formatter und -Minifier, der in Ihrem Browser läuft. Fügen Sie beliebiges HTML ein und das Tool erkennt, ob es verschönert werden muss (kompakte einzeilige Eingabe → eingerückte Ausgabe) oder minifiziert (eingerückte Eingabe → einzeilige Ausgabe), oder wählen Sie die Richtung manuell. Einrückung mit 2 Leerzeichen, 4 Leerzeichen oder Tabs. Void-Elemente (br, hr, img, input, meta, link) können XHTML-stil selbstgeschlossen oder HTML5-stil bloß gelassen werden. Leerraum innerhalb <pre>, <script> und <style> wird wortgetreu bewahrt — nie angerührt. Kommentare können optional aus beiden Richtungen entfernt werden.
Verwendung
Richtung wird standardmäßig automatisch erkannt.
2 Leerzeichen ist der Standard für die meisten Front-End-Style-Guides.
Verschönerte oder minifizierte Version erscheint rechts.
Ein-Klick-Zwischenablage oder als .html speichern.
HTML im Browser verschönern oder minifizieren — bewahrt <pre>-, <script>-, <style>-Inhalt wortgetreu
Funktionen
Typische Anwendungen
- Eine kopiert-eingefügte minifizierte HTML-Datei verschönern, um ihre Struktur zu inspizieren.
- Ein HTML-E-Mail-Template vor dem Deploy minifizieren — spart Bytes bei jedem Versand.
- HTML5-Void-Elemente in XHTML-Selbstschließen für eine XML-strikte Pipeline konvertieren.
- Entwicklerkommentare aus einem Produktions-HTML-Build entfernen.
- Ein handgeeditetes Template neu einrücken, um Team-Konventionen zu entsprechen.
Warum dieser
Viele browser-basierte Formatter verstümmeln den Inhalt von <pre> oder <script>. Wir verwenden eine leichtgewichtige tokenisierende State-Machine, die Raw-Text-Elemente (script, style, pre, textarea) erkennt und deren Inhalt in Ruhe lässt. Alles andere bekommt saubere Pro-Block-Einrückung. Läuft in Ihrem Browser über einen Vanilla-JS-Tokenizer — ohne Anmeldung, ohne Pro-Datei-Kontingent.
Häufige Fragen
Was ist ein "Void-Element"?
Ein HTML-Element ohne schließendes Tag und ohne Inhalt — br, hr, img, input, meta, link, source, track, area, base, col, embed, param, wbr. In HTML5 können diese als <br> (bevorzugt) oder <br /> (XHTML-Legacy) geschrieben werden. Wählen Sie, was Ihr Linter erwartet.
Modifiziert es Inhalt in <script> oder <style>?
Nein. Alles in <script>, <style>, <pre> und <textarea> wird byte-für-byte bewahrt. Whitespace-Handling um diese Tags folgt HTML5-Raw-Text-Element-Regeln.
Warum hat meine minifizierte Ausgabe noch Leerzeichen?
Minifizierung kollabiert Inter-Tag-Whitespace, bewahrt aber mindestens ein Leerzeichen wo es semantisch bedeutsam ist (zwischen Inline-Elementen). Für aggressive Minifizierung (null Whitespace) verwenden Sie einen dedizierten Minifier wie html-minifier-terser.
Wird das ungeschlossene Tags reparieren?
Nein — das Tool ist rein ein Formatter. Wenn Sie ungeschlossene <div>s haben, wird die Ausgabe die (kaputte) Struktur widerspiegeln. Verwenden Sie einen Validator wie den W3C Nu Validator für strukturelles Lint.
Behandelt es Templating-Syntax wie @{{ ... }} oder {% %}?
Versucht die meisten Templating-Tokens intakt zu lassen, aber Blade ({{ }}), Twig ({% %}), Vue ({{ }}) etc. können trotzdem komisch beabstandet werden. Für Templates mit schwerer Interpolation formatieren Sie das gerenderte HTML oder verwenden Sie ein templating-bewusstes Tool.
Mobil?
Ja — Eingabe und Ausgabe stapeln sich auf schmalen Bildschirmen.
Machen wir — und zwar kostenlos! Schreiben Sie uns kurz Ihre Idee. Wenn Sie sie im Detail besprechen möchten, hinterlassen Sie eine E-Mail-Adresse, wir melden uns. Anonym geht auch.
