Lesbares HTML mit Prettier
Der HTML Formatter verwendet Prettier, den in der Webentwicklung weit verbreiteten Code-Formatierer. Er liest das HTML ein, versteht die Verschachtelung der Elemente und gibt es mit einheitlicher Einrückung und sinnvollen Zeilenumbrüchen wieder aus. Lange Tags mit vielen Attributen werden auf mehrere Zeilen verteilt, sobald sie die gewählte Zeilenbreite überschreiten.
Eingebettete <style>- und <script>-Blöcke werden ebenfalls formatiert, sodass auch Inline-CSS und -JavaScript lesbar werden. Inhalt und Struktur ändern sich nicht: Tags, Attribute und Texte bleiben dieselben, nur Leerraum und Zeilenumbrüche werden angepasst. Prettier berücksichtigt dabei, wo Leerraum im HTML sichtbar ist, und vermeidet Änderungen, die die Darstellung beeinflussen würden.
Sie wählen die Einrückung mit 2 Leerzeichen, 4 Leerzeichen oder Tabs sowie eine Zeilenbreite von 80, 100 oder 120 Zeichen. So passt das Ergebnis zu den Konventionen Ihres Projekts. Ist das HTML so fehlerhaft, dass es sich nicht parsen lässt, zeigt das Werkzeug die Meldung des Parsers an. Typischer Ausgangspunkt ist HTML, das in einer einzigen Zeile steht: der Quelltext einer minifizierten Website, ein Export aus einem Page-Builder oder eine HTML-E-Mail aus einem Newsletter-Tool. In dieser Form lässt sich kaum erkennen, welches Element wo endet. Nach dem Formatieren sehen Sie die Verschachtelung auf einen Blick, finden ein fehlendes schließendes Tag schneller und können Abschnitte gezielt kopieren oder bearbeiten. Kommentare im Code bleiben beim Formatieren erhalten.
Die Formatierung läuft vollständig im Browser, nichts wird hochgeladen. Kostenlos verarbeiten Sie eine Datei oder einen eingefügten Text und können denselben Text mit anderen Optionen neu formatieren. Für neue Eingaben, mehrere Dateien gleichzeitig mit ZIP-Download und ohne Werbung gibt es ToolStudio Pro, jederzeit kündbar.
So formatieren Sie HTML
- HTML einfügen oder eine Datei ablegen bzw. auswählen.
- Einrückung wählen: 2 Leerzeichen, 4 Leerzeichen oder Tabs.
- Zeilenbreite auf 80, 100 oder 120 Zeichen setzen.
- Formatierung starten.
- Formatiertes HTML kopieren oder herunterladen.
Wofür Sie den HTML Formatter nutzen
- Minifiziertes HTML einer Website analysieren.
- Exporte aus Page-Buildern, E-Mail-Editoren oder CMS lesbar machen.
- Einheitliche Einrückung vor einem Code-Review herstellen.
- Verschachtelungsfehler leichter finden, weil die Struktur sichtbar wird.
- HTML-Vorlagen für Dokumentation oder Tutorials aufbereiten.
Tabs oder Leerzeichen, 80 oder 120 Zeichen?
2 Leerzeichen sind bei HTML am verbreitetsten, weil Dokumente tief verschachtelt sind. Tabs haben den Vorteil, dass jeder Editor die Breite selbst darstellt. 4 Leerzeichen sind bei manchen Teams Standard.
Die Zeilenbreite legt fest, ab wann Prettier umbricht. 80 Zeichen ist der Prettier-Standard und gut für Diffs; 100 oder 120 Zeichen eignen sich für breite Bildschirme und Tags mit vielen Attributen.
Häufig gestellte Fragen
Ändert das Formatieren den Inhalt?
Nein. Nur Einrückung, Zeilenumbrüche und Leerraum werden angepasst. Tags, Attribute und Texte bleiben gleich.
Werden <style> und <script> mitformatiert?
Ja, eingebettetes CSS und JavaScript wird ebenfalls formatiert.
Was passiert bei fehlerhaftem HTML?
Wenn Prettier das HTML nicht parsen kann, zeigt das Werkzeug die Fehlermeldung an.
Wird mein HTML hochgeladen?
Nein, Prettier läuft vollständig in Ihrem Browser.
Ist der HTML Formatter kostenlos?
Eine Datei oder ein eingefügter Text ist kostenlos, und denselben Text können Sie mit anderen Optionen erneut formatieren. Neue Eingaben erfordern ToolStudio Pro: unbegrenzte Nutzung, mehrere Dateien als ZIP, keine Werbung, jederzeit kündbar.