Wie rücke ich unübersichtliches HTML ein?

Fügen Sie Ihr HTML mit ausgewählter Option Beautify ein und stellen Sie Einzug auf 2 Leerzeichen, 4 Leerzeichen oder Tabs. Die Ausgabe aktualisiert sich während der Eingabe, Sie können sie kopieren oder als .html-Datei herunterladen. Beispiel laden zeigt ein Muster.

Kann es lange Zeilen umbrechen oder Inline-CSS und -JavaScript formatieren?

Ja. Umbruch bietet Kein Umbruch, 80 Spalten oder 120 Spalten, und die Option Style- und Script-Tags formatieren formatiert auch das CSS und JavaScript innerhalb dieser Blöcke. Inhalte in pre und textarea bleiben exakt wie geschrieben.

Wie minimiere ich HTML für den Produktiveinsatz?

Wählen Sie Minify. Leerraum zwischen Tags wird reduziert und Kommentare werden entfernt, es sei denn, Sie aktivieren Kommentare behalten. Optionale Kontrollkästchen sind Optionale Anführungszeichen entfernen, Boolesche Attribute verkürzen und das Minimieren eingebetteter style-, script- und style-Attribute.

Zerstört das Minimieren meine pre-Blöcke oder Skripte?

Inhalte von pre, script, style und textarea werden beim Reduzieren von Leerraum geschützt, und zwischen benachbarten Inline-Elementen wird ein Leerzeichen beibehalten, damit Wörter nicht verschmelzen. Die optionale eingebettete Minimierung erfolgt nur, wenn Sie sie aktivieren.

Wird mein HTML an einen Server gesendet?

Nein. Ein in die Seite integrierter Tokenizer verarbeitet das Markup in Ihrem Browser, sodass private Vorlagen und E-Mail-HTML auf Ihrem Gerät bleiben. Es wird keine externe Formatierungsbibliothek geladen.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

🌐

HTML-Beautifier & -Minifier – kostenlos

HTML mit korrekter Verschachtelungseinrückung formatieren oder minifizieren. Inhalt in <pre>-, <script>- und <style>-Blöcken bleibt erhalten.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

Einzug:

Umbruch:

Datei hierher ziehen oder zum Auswählen klicken

HTML, HTM · Verarbeitung auf Ihrem Gerät

oder drücken Sie Strg+V, um aus der Zwischenablage einzufügen

Dateien durchsuchen

HTML-Eingabe

Formatiertes HTML

Ausgabe erscheint hier…

Häufige Anwendungen

Debuggen Sie serverseitig gerendertes HTMLSehen Sie sich die rohe HTML-Ausgabe von Ihrem Server (PHP, Rails, Django, Node) in lesbarem eingerücktem Format an.
Formatieren Sie E-Mail-HTML-VorlagenE-Mail-HTML ist ausführlich (Tabellen, Inline-Stile). Formatieren Sie, um es bearbeitbar und wartbar zu machen.
Formatieren Sie statische HTML-SeitenManuell bearbeitete statische HTML-Dateien profitieren von konsistenter Formatierung für gemeinsame Bearbeitung.
Bereinigen Sie CMS-exportiertes HTMLWordPress, Wix, Squarespace exportieren HTML mit vielen Artefakten. Formatieren Sie, um es bearbeitbar zu machen.
Minify HTML für ProduktionReduzieren Sie die HTML-Dateigröße für schnellere Seitenladungen, indem Sie Leerzeichen und unnötige Zeichen entfernen.

So funktioniert es

Dieses Tool formatiert oder komprimiert HTML mit einem selbst geschriebenen, tag-bewussten Tokenizer direkt in der Seite – keine Formatierungsbibliothek von Drittanbietern, kein Serverumweg. Jedes Zeichen Ihres Markups wird lokal im Browser verarbeitet, sobald Sie es tippen oder einfügen.

1
Der Tokenizer durchsucht das Markup
Ein eigener zeichenweiser Scanner durchläuft die HTML-Zeichenkette und erkennt Kommentare, DOCTYPE-Deklarationen, öffnende und schließende Tags, selbstschließende leere Elemente (br, img, input usw.) und reine Textknoten. Eine eigene Hilfsfunktion verfolgt Attributwerte in Anführungszeichen, damit Zeichen wie > in einem Attribut (z. B. value="a>b") einen Tag nie vorzeitig teilen.
2
Die Einrückungstiefe wird pro Tag verfolgt
Im Beautify-Modus führt der Tokenizer einen Tiefenzähler. Öffnende Block-Tags erhöhen die Tiefe; schließende Tags verringern sie, bevor sie geschrieben werden. Inline-Elemente (span, a, strong, em usw.) bleiben in derselben Zeile wie ihr Inhalt, statt in eine eigene eingerückte Zeile verschoben zu werden. Bei Tags wie pre, script, style und textarea wird der Inhalt unverändert ausgegeben, um leerraumempfindlichen oder ausführbaren Code nicht zu beschädigen.
3
Der Minifier fasst Leerraum sicher zusammen
Im Minify-Modus werden die Inhalte von pre-, script-, style- und textarea-Blöcken vor dem Zusammenfassen von Leerraum durch nummerierte Platzhalter ersetzt. HTML-Kommentare werden entfernt und Leerraum zwischen Tags gelöscht – außer zwischen benachbarten Inline-Elementen, wo ein einzelnes Leerzeichen erhalten bleibt, damit Wörter nicht verschmelzen. Anschließend werden die Platzhalter wieder durch ihren Originalinhalt ersetzt.
4
Die Ausgabe wird angezeigt und kann gespeichert werden
Das formatierte oder minimierte Ergebnis erscheint live im Ausgabebereich zusammen mit der prozentualen Größenänderung. Sie können es in die Zwischenablage kopieren oder als .html-Datei herunterladen, ohne den Browser zu verlassen.

HTML-Beautifier & -Minifier – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

CSS-Beautifier

CSS-Minifier & -Beautifier

XML-Formatierer & -Validator

Häufige Fragen