HTML-Formatierer & Verschönerer

Fügen Sie unformatierten oder unordentlichen HTML-Code links ein und erhalten Sie rechts eine sauber eingerückte Version. Ideal für die schnelle Bereinigung von Markup aus verschiedenen Quellen.

Funktionen

HTML-Tags automatisch einrücken
Anpassbare Einrückung
Kommentare behalten oder entfernen
Syntaxhervorhebung

Anleitung

1. Fügen Sie Ihren HTML-Code in das Eingabefeld links ein.

2. Klicken Sie auf Formatieren, um ihn mit korrekter Einrückung zu verschönern.

3. Klicken Sie auf Minifizieren, um Leerzeichen zu entfernen.

4. Kopieren oder laden Sie das Ergebnis rechts herunter.

Über dieses Werkzeug

HTML aus einem Browser, einem CMS oder einem minifizierten Build kommt oft als eine einzige unlesbare Zeile. Dieser Formatierer rückt es neu ein, sodass jedes verschachtelte Element eine Ebene tiefer steht als sein Elternelement – Struktur, fehlende schließende Tags und falsch platzierte Elemente werden so leicht erkennbar. Er kennt leere Elemente wie <br>, <img> und <input>, die nie ein schließendes Tag haben, und lässt den Inhalt von <pre>, <textarea>, <script> und <style> genau so, wie er ist, weil Leerraum darin bedeutsam ist. Wählen Sie zwei Leerzeichen, vier Leerzeichen oder Tabs und kopieren oder laden Sie das Ergebnis herunter. Minifizieren macht das Gegenteil: Es entfernt Kommentare und fasst Leerraum zwischen Tags zusammen, um das Seitengewicht im Produktivbetrieb zu senken.

Häufig gestellte Fragen

Ändert das Formatieren das Aussehen meiner Seite?
In den meisten Fällen nicht. Leerraum zwischen Blockelementen wird von Browsern ignoriert. Zwischen Inline-Elementen, etwa zwei nebeneinanderstehenden Links oder spans, kann ein hinzugefügter oder entfernter Zeilenumbruch den Abstand um ein Leerzeichen verändern – prüfen Sie Markup mit vielen Inline-Elementen daher nach dem Formatieren.
Warum wird der Inhalt von <pre> und <script> nicht neu eingerückt?
Leerraum in <pre> und <textarea> wird genau so angezeigt, wie er geschrieben ist, und geänderte Einrückungen in <script> oder <style> könnten Code oder Strings verändern. Diese Blöcke bleiben unverändert erhalten.
Repariert der Formatierer ungültiges HTML?
Er repariert oder validiert kein Markup. Er rückt ein, was er erhält, wodurch Probleme wie nicht geschlossene Tags oft sichtbar werden. Zur Konformitätsprüfung verwenden Sie den W3C-Validator.
Was entfernt Minifizieren?
Es entfernt HTML-Kommentare und überflüssigen Leerraum zwischen Tags. Inhalte, die von Leerraum abhängen, etwa Text in <pre>, bleiben erhalten. Bei Produktiv-Websites spart die Serverkompression mit gzip oder Brotli mehr als Minifizieren allein.
Kann ich Vue, Angular oder Template-Syntax formatieren?
Template-Ausdrücke wie {{ name }} bleiben als Text erhalten, und Komponenten-Tags werden wie normale Elemente eingerückt. Komplexe Direktiven mit spitzen Klammern in Attributwerten können einen einfachen HTML-Formatierer verwirren – prüfen Sie daher die Ausgabe.

Verwandte Werkzeuge