HTML online lesbar formatieren
Verwandle komprimierten Seitenquelltext in lesbares Markup. Tags werden nach ihrer Verschachtelungstiefe eingerückt, Attribute übersichtlich angeordnet, und eingebettete Skripte und Styles werden zusammen mit dem Dokument formatiert.
Warum Seitenquelltext so unübersichtlich wirkt
HTML-Minifizierer verkürzen Leerraum zwischen Tags, entfernen Kommentare und können optionale End-Tags oder entbehrliche Anführungszeichen an Attributen weglassen. Serverseitige Vorlagen können zusätzlich dazu führen, dass aus vielen einzelnen Dateien ein zusammenhängender Datenstrom ohne erkennbare Dateigrenzen wird. Im Quelltext einer produktiven Website stehen dann oft nur wenige sehr lange Zeilen. Um das Ende eines Abschnitts zu finden, muss man verschachtelte Tags mühsam verfolgen, obwohl die eigentliche Dokumentstruktur überschaubar wäre.
Die Dokumentstruktur sichtbar machen
HTML bildet eine Baumstruktur, die in einer flachen Zeile schwer zu erfassen ist. Einrückungen zeigen, wo der Kopfbereich endet, welcher Container den Hauptinhalt umschließt und wie tief eine Komponente verschachtelt ist. Damit kannst du Überschriftenfolgen prüfen, die Ausgabe eines Frameworks untersuchen oder nachvollziehen, wie ein bestimmter Seitenabschnitt aufgebaut wurde. Auffällige Verschachtelungen fallen leichter auf. Eine lesbare Ausgabe ist allerdings kein Nachweis dafür, dass das Dokument in jeder Hinsicht korrekt oder barrierefrei ist. Vergleiche bei einer Untersuchung zusammengehörige Elemente wie Beschriftung und Eingabefeld, eine Liste mit ihren Einträgen oder ein Bild mit dem umgebenden Link. Die eingerückte Ansicht hilft, ihre Beziehung im Quelltext zu erkennen. Beachte dabei den Unterschied zwischen empfangenem Seitenquelltext und dem späteren DOM: JavaScript kann Elemente hinzufügen oder verändern, und der Browser kann fehlerhaftes HTML beim Einlesen korrigieren. Wenn du den aktuellen Zustand einer interaktiven Seite untersuchen möchtest, ziehe deshalb auch den Elemente-Tab der Entwicklertools hinzu.
Eingebettete Skripte und Styles werden mitformatiert
Eine echte Seite besteht selten nur aus Markup. Analyse-Snippets, strukturierte JSON-LD-Daten, Konfigurationsobjekte und kritisches CSS sind direkt in das Dokument eingebettet, und ein Minifizierer komprimiert auch diese. Der Formatter verarbeitet jeden eingebetteten Block mit dem passenden Parser: Ein script-Tag mit minifiziertem JavaScript wird zu lesbarem JavaScript, ein style-Tag zu lesbarem CSS, und das alles innerhalb des korrekt eingerückten Dokuments.
Leerraum im HTML bewusst behandeln
Leerzeichen und Zeilenumbrüche können in HTML sichtbar sein und die Darstellung beeinflussen. Prettier berücksichtigt dafür besondere Regeln, etwa für vorformatierten Text und Inline-Inhalte. Trotzdem ist eine unveränderte Darstellung nicht für jedes Dokument und jede CSS-Konfiguration garantiert. Nutze eine Kopie zur Analyse und prüfe das Ergebnis im Browser, bevor du es wieder veröffentlichst. Das ist besonders bei gemischten Text- und Inline-Elementen sowie bei Inhalten wichtig, deren Leerraum durch CSS gezielt erhalten wird.
Häufig gestellte Fragen
Kann ich den vollständigen Quelltext einer Seite einfügen?
Ja. Kopiere den Quelltext mit view-source aus deinem Browser oder speichere die Seite und öffne die Datei. Das vollständige Dokument wird formatiert, einschließlich head, body, eingebetteter Skripte und strukturierter Daten.
Verändert die Formatierung die Darstellung der Seite?
Der Formatter versucht, bedeutenden Leerraum zu berücksichtigen. Eine identische Darstellung lässt sich dennoch nicht für jede Kombination aus HTML und CSS garantieren. Formatiere deshalb eine Kopie zum Lesen und prüfe die Ausgabe im Browser, bevor du sie produktiv einsetzt, besonders bei vorformatiertem Text und Inline-Inhalten.
Funktioniert das mit Vorlagen wie Twig oder Blade?
Nur eingeschränkt. Gewöhnliches HTML lässt sich formatieren, eigene Anweisungen und Ausdruckssyntax einer Vorlagensprache können den HTML-Parser jedoch stören. Das Werkzeug ist vor allem für das fertige HTML gedacht, das der Browser erhält. Für Twig- oder Blade-Quelldateien solltest du einen passenden Formatter für die jeweilige Vorlagensprache verwenden.