tigtools

HTML-Formatierer

HTML einfügen, um es nach Verschachtelungsebene einzurücken oder unnötigen Leerraum zu entfernen. Der Code wird nur als Text verarbeitet und niemals dargestellt.

Läuft in Ihrem Browser Keine Anmeldung erforderlich

Modus
Einrückung (Leerzeichen)

Geben Sie etwas ein, um das Ergebnis zu sehen.

Anleitung

  1. HTML in das Eingabefeld einfügen, eine .html-Datei öffnen oder das Beispiel ausprobieren.
  2. Für eingerücktes, lesbares Markup „Verschönern“ oder für kompakte Ausgabe „Minifizieren“ wählen.
  3. Beim Verschönern 2 Leerzeichen, 4 Leerzeichen oder Tabs wählen und festlegen, ob Kommentare beibehalten werden.
  4. Das Ergebnis kopieren oder als .html-Datei herunterladen.

So funktioniert es

Der Formatierer liest das HTML mit einem toleranten Tokenizer, ähnlich wie ein Browser, und schreibt es wieder aus. Er rendert die Eingabe nie; daher können Skripte im eingefügten Code nicht ausgeführt werden und es wird nichts aus dem Web geladen.

Beautify setzt jedes Blockelement (div, p, ul, li, section, table, …) in eine eigene Zeile, eingerückt entsprechend seiner Verschachtelungstiefe. Text und Inline-Elemente wie a, b, em, span, code, img und br bleiben in einer Zeile zusammen, sodass die Leerzeichen zwischen Wörtern und Links nicht so verändert werden, dass sich die gerenderte Seite ändert. Folgen von Leerzeichen und Zeilenumbrüchen im Text werden zu einem einzelnen Leerzeichen – genau so, wie Browser sie ohnehin anzeigen.

Der Inhalt von pre-, textarea-, script- und style-Elementen wird exakt so kopiert, wie er geschrieben wurde, einschließlich aller Leerzeichen und aller <- oder >-Zeichen. Void-Elemente wie br, img, input, meta und link erhalten nie ein schließendes Tag. Selbstschließende Tags wie <path /> in Inline-SVG bleiben selbstschließend.

Minify reduziert Leerraum im Text auf einzelne Leerzeichen, entfernt Leerraum neben Blockelementen, normalisiert die Leerzeichen zwischen Attributen und entfernt Kommentare, wenn „Kommentare behalten“ deaktiviert ist. Bedingte Kommentare bleiben immer erhalten.

Das Tool repariert kein ungültiges HTML, ergänzt keine fehlenden Tags, ordnet Attribute nicht neu und minifiziert weder das CSS noch das JavaScript innerhalb von style- und script-Elementen. Elemente, die offen bleiben, werden am Ende ihres Elternelements geschlossen; ein schließendes Tag ohne passendes öffnendes Tag bleibt wie geschrieben erhalten.

Beispiele

Generiertes Markup lesen

Ein CMS gibt ein Template als eine lange Zeile aus. Beautify mit 2 Leerzeichen zeigt die Navigation, die Listenelemente und den Hauptinhalt als eingerückten Baum, während der Satz „Preise enthalten <strong>Mehrwertsteuer</strong>.“ in einer gut lesbaren Zeile bleibt.

E-Mail-Vorlage vorbereiten

Minifizieren Sie eine HTML-E-Mail mit deaktivierten Kommentaren, um ihre Größe zu reduzieren. Ein <pre>-Block mit einer Preistabelle und das Inline-<style>-Element bleiben exakt so erhalten, wie sie waren.

Struktur prüfen

Wenn ein schließendes </div> fehlt, zeigt die Beautify-Ausgabe die folgenden Elemente eine Ebene zu tief eingerückt. So ist leicht zu erkennen, wo das Element hätte enden sollen.

Häufig gestellte Fragen

Beeinflusst das Verschönern die Darstellung meiner Seite?

In fast allen Fällen nein. Leerraum innerhalb von Blockelementen wird zusammengeführt und in Zeilenumbrüche umgewandelt, die Browser ignorieren. Text und Inline-Elemente bleiben in derselben Zeile, und pre, textarea, script und style werden nicht verändert. Die Ausnahme sind Seiten, die auf CSS white-space: pre bei normalen Elementen beruhen.

Minifiziert es das CSS und JavaScript innerhalb der Seite?

Nein. Skript- und Style-Inhalte werden exakt so beibehalten, wie sie geschrieben sind, damit nichts beschädigt wird. Verwenden Sie den CSS-Formatierer, um ein Stylesheet separat zu minifizieren.

Ist es sicher, HTML aus einer unbekannten Quelle einzufügen?

Ja. Die Eingabe wird rein als Text behandelt und niemals in die Seite eingefügt; dadurch werden ihre Skripte nicht ausgeführt und ihre Bilder oder Links nicht geladen.

Validiert es mein HTML?

Nein. Es ist bewusst tolerant und formatiert fehlerhaftes Markup, statt es abzulehnen. Nicht übereinstimmende schließende Tags bleiben erhalten, sodass die Einrückung hilft, sie zu erkennen; es wird jedoch keine Fehlerliste erstellt.

Datenschutz

Ihr HTML wird nur in Ihrem Browser verarbeitet und niemals dargestellt oder hochgeladen. Es wird nichts gespeichert oder in Analysen einbezogen.