HTML Formatter
Machen Sie aus einer langen HTML-Zeile sauber eingerücktes Markup, das Sie lesen und bearbeiten können.
HTML online formatieren
HTML aus einem E-Mail-Builder, einem CMS-Export, einem Page Builder oder einer minifizierten Produktionsseite ist meist eine einzige riesige Zeile. Darin ein bestimmtes div zu finden, ist mühsam. Diese Seite ist der Code Formatter, eingestellt auf HTML: Fügen Sie das Markup ein, und jedes Element steht in einer eigenen Zeile, eingerückt nach seiner Verschachtelungstiefe.
Die Formatierung übernimmt js-beautify, ein weit verbreiteter Open-Source-Formatter, direkt in Ihrem Browser-Tab. Nichts wird hochgeladen.
Was der Formatter macht
- Blockelemente wie div, section, ul und li beginnen jeweils eine neue Zeile, eingerückt unter ihrem Elternelement.
- Inline-Elemente wie a, b, span und em bleiben in der Textzeile, zu der sie gehören.
- Attribute bleiben genau so erhalten, wie sie geschrieben sind, in derselben Reihenfolge.
- Leerzeilen, die Sie bewusst gesetzt haben, bleiben erhalten, bis zu zwei hintereinander.
Wann formatieren, wann minifizieren
Formatieren Sie, wenn ein Mensch die Datei lesen oder bearbeiten muss. Minifizieren Sie, wenn ein Browser sie herunterladen muss: Das Entfernen von Kommentaren und Einrückung spart vor gzip typischerweise 10 bis 20 % einer HTML-Seite. Für die meisten Websites bringt die Komprimierung auf dem Server mehr, doch Minifizieren hilft weiterhin bei Vorlagen, die inline in E-Mails oder andere Seiten eingebettet werden.
Verwandte Tools
Für das Stylesheet zur Seite nutzen Sie den CSS Minifier, für Skripte den JavaScript Beautifier. Um das Markup vor und nach einer Änderung zu vergleichen, nutzen Sie den Textvergleich.