Ueberblick
Dieser Formatierer ordnet Tags, Verschachtelungen und Leerzeichen so, dass Markup leichter geprüft und bearbeitet werden kann. Die Reihenfolge der Elemente und der Inhalt bleiben erhalten, die Hierarchie wird jedoch sofort sichtbar. Das ist nützlich, wenn HTML aus einem CMS, aus einem Build-Ergebnis oder aus mehreren Quellen stammt. Da das Tool im Browser arbeitet, eignet es sich gut zum Prüfen von Snippets, Vergleichen von Vorlagenversionen und für manuelle Nacharbeiten.
Anwendungsfaelle
- CMS-Ausgabe prüfenBereinige vom Editor erzeugtes HTML, bevor du nach fehlenden Containern oder falscher Verschachtelung suchst.
- Vorlagenversionen vergleichenFormatiere beide Versionen vor dem Diff, damit Strukturänderungen besser auffallen.
- E-Mail-Markup aufräumenLange Tabellen- und Inline-Fragmente werden übersichtlicher und lassen sich sicherer manuell anpassen.
- Snippets für Dokumentation aufbereitenZeige dem Team das Markup in einer klaren Form, damit die Komponentenstruktur schneller erkennbar ist.
So funktioniert es
- 1
HTML in das Eingabefeld einfügen.
- 2
Falls verfügbar, Einzug oder Kommentarverhalten einstellen.
- 3
Den Formatter starten, um sauber strukturiertes HTML zu erzeugen.
- 4
Das Ergebnis kopieren und im Editor, in Notizen oder im Projekt verwenden.
Beispiele
Kompakte Produktkarte
Eingabe: <article><h3>Pro Plan</h3><p>Everything included</p><a href="/pricing">View plans</a></article>
Ausgabe: <article> <h3>Pro Plan</h3> <p>Everything included</p> <a href="/pricing">View plans</a> </article>
Macht ein einzeiliges Component-Markup lesbar.
Verschachtelter Layout-Ausschnitt
Eingabe: <div class="wrap"><header><nav><a href="/">Home</a><a href="/docs">Docs</a></nav></header><main><section><img src="hero.jpg" alt="Hero"></section></main></div>
Ausgabe: <div class="wrap"> <header> <nav> <a href="/">Home</a> <a href="/docs">Docs</a> </nav> </header> <main> <section> <img src="hero.jpg" alt="Hero"> </section> </main> </div>
Teilt ein dichtes Layout in klar erkennbare Bereiche auf.
E-Mail-Tabellenfragment
Eingabe: <table><tr><td><strong>Order #4821</strong></td><td align="right">Shipped</td></tr><tr><td colspan="2"><a href="https://example.com">Track package</a></td></tr></table>
Ausgabe: <table> <tr> <td><strong>Order #4821</strong></td> <td align="right">Shipped</td> </tr> <tr> <td colspan="2"> <a href="https://example.com">Track package</a> </td> </tr> </table>
Zeigt, wie tabellenlastiges HTML leichter geprüft und bearbeitet werden kann.
FAQ
Ändert das Formatieren die Attributreihenfolge oder den Inhalt?
Es sollte die Bedeutung des HTML nicht verändern. Das Ziel ist bessere Einrückung und Lesbarkeit, nicht das Umschreiben von Inhalten.
Warum bleibt manches Inline-Markup in einer Zeile?
Kurze Inline-Strukturen können kompakt bleiben, wenn der Formatter sie so belässt. Das ist meist normal und vermeidet unnötige Zeilenumbrüche.
Was passiert bei fehlerhaftem HTML?
Stark beschädigtes Markup kann dennoch formatiert werden, aber das Ergebnis folgt dann der bestmöglichen Parser-Interpretation. Fehlerhafte Tags solltest du möglichst zuerst korrigieren.
Kann ich Kommentare beim Formatieren entfernen?
Wenn das Entfernen von Kommentaren aktiviert ist, können sie gelöscht werden. Andernfalls bleiben sie erhalten.
Warum unterscheidet sich das Ergebnis von der Pretty-Ansicht meines Editors?
Verschiedene Formatter nutzen unterschiedliche Regeln für Zeilenumbrüche, Leerzeichen und leere Elemente. Kleine Abweichungen sind normal.