HTML-Formatierer
Räum unordentliches HTML auf, oder minifiziere es für die Produktion.
Läuft in deinem Browser. Nichts, was du eingibst, wird irgendwohin gesendet.
- 2 oder 4 Leerzeichen Einrückung
- Minifizieren mit einem Klick
- Nichts wird hochgeladen
So formatierst du HTML
- Füg dein HTML ein.
- Wähl eine Einrückungsgröße, oder aktiviere Minifizieren.
- Kopiere oder lade das Ergebnis herunter.
Aufräumen gegen Minifizieren
| Aufräumen | Minifizieren | |
|---|---|---|
| Einrückung | Fügt 2, 4 oder 8 Leerzeichen hinzu | Entfernt sie |
| Kommentare | Bleiben erhalten | Entfernt |
| Leerraum zwischen Tags | Vereinheitlicht | Entfernt |
| Inhalt in pre, textarea, script, style | Unangetastet | Unangetastet |
Wo minifiziertes HTML wichtig ist
- Eine Produktionsseite lädt etwas schneller und braucht weniger Bandbreite, sobald Leerraum und Kommentare weg sind.
- Minifiziertes Markup ist im Seitenquelltext schwerer zu lesen, ein fairer Kompromiss in der Produktion, aber ein Nachteil beim Debuggen.
Tipps zum Formatieren von HTML
- Behalte eine lesbare, eingerückte Kopie in der Versionsverwaltung und minifiziere nur, was du deployst, denn minifiziertes Markup mit dem Auge zu debuggen ist langsam.
- 2 Leerzeichen Einrückung passt zu tief verschachteltem Markup, 4 Leerzeichen sind auf flachen, einfachen Seiten leichter zu überblicken.
Was Einrückung beeinflusst und was nicht
- Sie ändert nie, was ein Browser darstellt, da Leerraum zwischen Block-Tags ohnehin zusammenfällt.
- Sie kann den Abstand zwischen Inline-Elementen wie <span> sichtbar verschieben, wenn ein Design dort auf exaktem Leerraum beruht. Prüf diese Stellen nach dem Formatieren.
- Sie hat keinen Effekt auf JavaScript-Verhalten, da die DOM-Struktur der Seite so oder so gleich bleibt.
Häufige Fragen zu HTML-Formatierer
Was macht Minifizieren hier?
Es entfernt Kommentare und den Leerraum zwischen Tags, ohne den Text oder die Attribute innerhalb von pre, textarea, script und style anzurühren.
Verändert Formatieren, wie meine Seite aussieht?
Nein. Einrückung und Abstände zwischen Tags beeinflussen die Darstellung nicht, die Seite sieht also vorher und nachher gleich aus.
Behebt es kaputte oder nicht geschlossene Tags?
Nein. Es formatiert das HTML, das du eingibst, um. Behebe fehlende oder nicht passende Tags zuerst in deinem Editor.
Kann ich ein ganzes HTML-Dokument formatieren?
Ja, samt Doctype, head und body. Sehr lange Dokumente brauchen einen Moment zum Formatieren.
Validiert es mein HTML?
Nein. Es formatiert oder minifiziert, was auch immer für Markup du eingibst, und prüft nicht auf fehlenden Alt-Text, nicht geschlossene Tags oder andere Validierungsprobleme.
Werden auch eingebettete style- und script-Tags neu formatiert?
Ja, beim Aufräumen. Der Formatierer rückt das CSS in einem style-Tag und das JavaScript in einem script-Tag zusammen mit dem umgebenden Markup ein.
Entfernt Minifizieren Kommentare, die ein Templating-System nutzt?
Standard-HTML-Kommentare (<!-- ... -->) werden immer entfernt, auch solche, die ein Templating-System als Marker nutzt. Trägt dein Kommentar anderswo Bedeutung, formatiere nur und überspring Minifizieren.
Kann ich nur ein Fragment formatieren, ohne ganzes Dokument?
Ja. Ein kurzer Ausschnitt aus ein paar Tags wird genauso formatiert wie eine ganze Seite. Er braucht keinen Doctype, head oder body, um zu funktionieren.