HTML formatieren und einrücken

Füge HTML ein und klick auf Formatieren für sauber und einheitlich eingerücktes Markup, oder auf Minifizieren, um es zu verkleinern. Das Beispiel unten ist eine Bestell-Mail, gequetscht in fünf lange Zeilen.

Eingabe (739 Bytes)

Ergebnis

So formatierst du HTML

  1. Füge dein HTML in den Eingabe-Editor ein (oder lass das Beispiel stehen, um zu sehen, was passiert).
  2. Wähl die Einrückung, die dein Projekt verwendet, und wo lange Zeilen umbrechen sollen.
  3. Klick auf Formatieren. Kopier das Ergebnis oder lade es im Ergebnis-Bereich herunter.

Beispiele

  • Ein zusammengequetschtes E-Mail-Template. E-Mail-Builder exportieren Markup oft in einer Handvoll sehr langer Zeilen. Beim Beispiel oben macht Formatieren aus rund 700 Zeichen in fünf Zeilen ein eingerücktes Dokument, in dem Tabellenzeilen, Button und Skript jeweils leicht zu finden sind.
  • Aus dem Browser kopiertes Markup. Code aus den Entwicklertools oder aus dem Seitenquelltext behält seine ursprüngliche, oft uneinheitliche Einrückung. Ein Durchlauf mit 2 Leerzeichen macht den Diff gegen deine Version lesbar.
  • Eine statische Seite ausliefern. Minifizieren entfernt Kommentare und Leerraum, bevor du eine Landingpage hochlädst oder HTML in ein CMS-Feld mit Zeichenlimit einfügst. Die Byte-Angaben über jedem Bereich zeigen, wie viel du gespart hast.

Fragen zum HTML Formatter

Wird mein Code an einen Server gesendet?

Nein. Das Formatieren läuft in deinem Browser mit der Open-Source-Bibliothek js-beautify, das Minifizieren mit einer kleinen Funktion auf dieser Seite. Nichts wird hochgeladen oder gespeichert.

Wird auch das CSS und JavaScript im HTML formatiert?

Ja. Code in <style>- und <script>-Tags wird mit den CSS- und JavaScript-Beautifiern derselben Bibliothek eingerückt. Inline-style-Attribute bleiben, wie sie sind.

Kann das Formatieren meine Seite kaputt machen?

Es ändert nur Leerraum zwischen Tags und innerhalb von <style> und <script>. Der Inhalt von <pre> und <textarea> wird nie angefasst. Leerraum zwischen Inline-Elementen, etwa zwei <span>-Tags, kann eine Rolle spielen, deshalb lässt der Formatter solche Elemente in derselben Zeile.

Was entfernt Minifizieren?

Kommentare, Zeilenumbrüche, mehrfache Leerzeichen und den Leerraum zwischen Block-Tags. Es benennt nichts um, lässt keine optionalen Tags weg und schreibt dein CSS und JavaScript nicht um, die Seite wird also exakt wie vorher dargestellt.

Was ist der Unterschied zwischen einem HTML Formatter und einem HTML Beautifier?

In der Praxis keiner. Beide Begriffe meinen, Markup neu einzurücken, sodass jedes verschachtelte Element in einer eigenen Zeile auf der richtigen Ebene steht. Diese Seite macht genau das und mit einem Klick auch das Gegenteil (Minifizieren).