HTML-Formatierer

So formatieren Sie HTML

1. Fügen Sie Ihr HTML ein oder klicken Sie auf Datei öffnen, um eine .html- oder .htm-Datei (bis 10 MB) zu laden.
2. Wählen Sie die Einrückung (2 Leerzeichen, 4 Leerzeichen oder Tabulator) und legen Sie unter Zeilen umbrechen bei fest, ob bei 80 oder 120 Zeichen umbrochen wird.
3. Aktivieren Sie und einrücken, wenn diese innerhalb von <html> eingerückt werden sollen, und Kommentare entfernen, um <!-- … -->-Kommentare zu löschen.
4. Klicken Sie auf Formatieren (verschönern) für gut lesbaren Code oder auf Minifizieren für die kleinste sichere Fassung.
5. Kopieren oder laden Sie das Ergebnis herunter. Die Statuszeile zeigt die Größe vorher und nachher.

Das Ergebnis erscheint als reiner Text im Ausgabefeld. Ihr HTML wird auf dieser Seite nie gerendert oder ausgeführt – Skripte im eingefügten Code können also nichts anrichten.

Verschönern: lesbares, einheitlich eingerücktes HTML

Formatieren (verschönern) nutzt js-beautify, den Formatierer, der in vielen Code-Editoren steckt:

• Blockelemente kommen in eigene Zeilen, eingerückt nach Verschachtelungstiefe, während Inline-Elemente wie <a>, <b> oder <span> im Textfluss bleiben;
• der Inhalt von <script> und <style> wird als JavaScript bzw. CSS formatiert;
• <pre> und <textarea> bleiben genau so, wie sie geschrieben sind, denn ihre Leerzeichen sind sichtbar;
• mehrere Leerzeilen hintereinander werden auf eine reduziert;
• mit einer Umbruchbreite werden lange Textzeilen und lange Attributlisten umbrochen.

Das Verschönern repariert kein fehlerhaftes Markup: Ein nicht geschlossenes <div> bleibt offen, und die Einrückung danach zeigt, wo das Problem liegt.

Minifizieren: kleineres HTML, ohne die Seite zu verändern

Minifizieren geht bewusst zurückhaltend vor:

• Folgen von Leerzeichen, Tabulatoren und Zeilenumbrüchen im Text werden zu einem einzigen Leerzeichen – genau so, wie der Browser sie anzeigt;
• Leerraum neben Block- und Head-Elementen (<div>, <p>, <li>, <td>, <meta>, <br> …) wird entfernt, weil er nie dargestellt wird;
• ein einzelnes Leerzeichen zwischen Inline-Elementen bleibt erhalten, damit aus <b>big</b> <i>world</i> nicht „bigworld“ wird;
• Kommentare werden entfernt, wenn Kommentare entfernen aktiviert ist – außer bedingten Kommentaren (<!--[if IE]>) und Kommentaren, die mit <!--! beginnen;
• der Inhalt von <script>, <style>, <pre> und <textarea> wird nie angetastet, und Attributwerte bleiben samt Anführungszeichen exakt erhalten.

Optionale schließende Tags werden nicht entfernt, Attribute nicht umgeschrieben und Inline-JavaScript und -CSS nicht komprimiert: Diese Optimierungen sparen etwas mehr, können aber Seiten beschädigen. Bei den meisten Seiten spart HTTP-Kompression (gzip oder Brotli) weit mehr als jeder Minifier. Minifizieren lohnt sich daher vor allem für HTML in E-Mails, Vorlagen oder JavaScript-Strings.