HTML-Formatierer / Beautifier

So verwendest du den HTML-Formatierer

1. Füge HTML in das Eingabefeld ein - eine vollständige Seite, ein minifiziertes Template-Fragment oder die Rohausgabe eines server-gerenderten Frameworks funktionieren alle. DOCTYPE, Script- und Style-Blöcke sind in Ordnung.
2. Wähle die Einrückung: 2 Leerzeichen (häufig in React- und Vue-Projekten), 4 Leerzeichen (klassischer HTML5-Stil) oder ein Tabulator-Zeichen. Die Einstellung gilt beim nächsten Klick auf "Formatieren".
3. Klicke auf "Formatieren", um jedes Block-Element einzurücken und jeden Tag auf eine eigene Zeile zu setzen, oder auf "Minifizieren", um das Dokument in einen kompakten einzeiligen String zu kollabieren.
4. Kopiere die Ausgabe mit der Zwischenablagentaste. Das Textarea behält eine scrollbare Kopie, damit du vorher und nachher vergleichen kannst, ohne die Seite zu verlassen.

Was das Tool intern macht

Der Formatierer tokenisiert die Eingabe in drei Arten von Knoten: öffnende Tags, schließende Tags und Textläufe. Wenn es ein öffnendes Tag sieht, erhöht es einen Einrückungszähler und gibt einen Zeilenumbruch aus; ein schließendes Tag verringert den Zähler, bevor es druckt. Leere Elemente, die im HTML-Living-Standard aufgeführt sind - <br>, <img>, <input>, <meta>, <link>, <hr>, <source> und Ähnliche - schieben niemals den Stack, weil sie keine Kinder haben können. Selbstschließende XML-Stil-Tags, die auf /> enden, werden genauso behandelt.

Inhalt innerhalb von <pre>, <textarea>, <script> und <style> wird unverändert beibehalten, weil die Neuformatierung dieser Elemente Leerzeichen verändern würde, die für Benutzer oder die JavaScript-Engine beobachtbar sind. Kommentare (<!-- -->) und die DOCTYPE-Deklaration werden auf eigener Zeile ausgegeben. Der Minifizierungs-Pass kollabiert Leerzeichen-Läufe zwischen Tags auf nichts, entfernt Kommentare und verbindet das Dokument zu einer Zeile.

Echte Gründe, dies zu verwenden

• Verstehen der Ausgabe eines server-gerenderten Frameworks (Rails, Django, Laravel) beim Debuggen einer unerwarteten DOM-Struktur.
• Vorbereiten eines E-Mail-Templates für ein CMS, das HTML inline ausliefert und von minifiziertem Markup profitiert.
• Normalisieren der Ausgabe eines WYSIWYG-Editors vor dem Committen in die Versionskontrolle.
• Inspizieren des gerenderten Shadow DOM einer einzelnen Web-Komponente nach dem Kopieren aus Chrome DevTools.
• Erstellen einer minimalen Reproduktion für einen Bug-Report, bei dem die Einrückung die Struktur offensichtlich macht.
• Umwandeln eines einzeiligen HTML-Snippets von einem CDN in etwas, das man auf einem Laptop-Bildschirm komfortabel lesen kann.

Fallstricke und Randfälle

• Tag-Suppe. Altes HTML erlaubt das Weglassen einiger schließender Tags (<li>, <p>, <td>). Der Formatierer behandelt sie so, als wären sie verschachtelt, was eine tiefere Einrückung als die konzeptionelle Struktur des Dokuments erzeugen kann. Die Ausgabe rendert im Browser trotzdem identisch.
• Inline-sensitives Leerzeichen. Leerzeichen zwischen <span>- oder <a>-Tags beeinflussen das gerenderte Layout. Aggressives Minifizieren kann "Hallo Link" zu "HalloLink" visuell zusammenfügen. Verwende ein nicht umbrechendes Leerzeichen oder ein führendes Leerzeichen innerhalb des Ankers, wenn dies wichtig ist.
• Bedingte Kommentare. Ältere Internet-Explorer-Kommentare wie <!--[if IE]> werden als einfache Kommentare beibehalten; aktuelle Browser ignorieren sie ohnehin, also ist das normalerweise in Ordnung.
• Eingebettetes SVG und MathML. Das Tool rückt sie wie jedes andere Markup ein, einschließlich der selbstschließenden Knoten, die XML-Syntax verwenden.
• CDATA-Blöcke. <![CDATA[ ... ]]> innerhalb von Inline-SVG überlebt den Roundtrip, weil der Tokenizer ihn als undurchsichtigen Text behandelt.

HTML-Spezifikationskontext

HTML ist keine versionierte Spezifikation mehr - die aktuelle Referenz ist der WHATWG HTML Living Standard, der den Parser in algorithmischen Begriffen statt als Grammatik definiert. Das bedeutet, dass dieselbe Eingabe je nach impliziten Schließregeln für <table>, <ul> oder <dl> in verschiedene DOM-Bäume tokenisiert werden kann. Leerzeichen zwischen Block-Elementen werden vom Browser während des Layouts kollabiert, daher ist Pretty-Printing reine Entwickler-Bequemlichkeit: deine gerenderte Seite sieht identisch aus, ob sie mit zwei Leerzeichen eingerückt oder auf eine Zeile gequetscht ist. Die einzigen Stellen, an denen Leerzeichen bedeutsam sind, liegen innerhalb von <pre>, <textarea>, Elementen mit white-space: pre und den Grenzen zwischen Inline-Formatierungskontexten.

Wann andere Tools besser sind

In einem Editor baut Prettiers HTML-Plugin einen echten Parse-Baum und behandelt Randfälle wie innerhalb von Block-Level-Inhalt verschachteltes <a>, die Wahrung von Tag-Weglassregeln und das Umbrechen langer Attributlisten. Das ist der richtige Standard für jedes Projekt mit einem Build-Schritt. Kommandozeilen-Tools wie tidy oder html-minifier-terser können zusätzlich Attribute deduplizieren, Boolean-Attribute kollabieren oder redundante Anführungszeichen entfernen. Dieses Web-Tool ist absichtlich einfacher - greife darauf zurück, wenn du eine einzelne minifizierte Seite lesen, ein E-Mail-Template verschönern oder ein Snippet für eine Transaktionsnachricht minifizieren musst, ohne npm anzufassen. Für Site-weite Optimierung integriere Minifizierung in deine Deploy-Pipeline.