HTML Beautifier Online für Reiniger Website Code

Einleitung

HTML, das von einer laufenden Website stammt, aus einem Seitenbaukasten exportiert oder aus einer E-Mail-Vorlage kopiert wurde, steht oft ohne jede Einrückung auf einer Handvoll Zeilen — technisch einwandfrei, für einen Menschen aber kaum zu lesen. Das Formatieren dreht das um: Es stellt die Zeilenumbrüche und Einrückungen wieder her, die die Verschachtelung der Tags sichtbar machen, ohne etwas daran zu ändern, was das Markup tut. Das zählt überall dort, wo der HTML-Code tatsächlich gelesen oder untersucht werden soll und nicht nur von einem Browser dargestellt — wenn Sie nachvollziehen wollen, wie eine Seite aufgebaut ist, den eingereichten Code eines Schülers prüfen oder herausfinden müssen, warum etwas nicht richtig angezeigt wird.

So formatiert dieses Werkzeug Ihren Code

Fügen Sie HTML ein und klicken Sie auf „Formatieren“, wird es mit zwei Leerzeichen Einrückung pro Verschachtelungsebene neu aufgebaut, sodass auf einen Blick erkennbar ist, welche Elemente in welchen anderen stecken. Ein paar Punkte zum Umgang mit echtem HTML sind dabei gut zu wissen:

• Kommentare bleiben erhalten, sie werden nicht entfernt. HTML-Kommentare, auch bedingte Kommentare und CDATA-Blöcke, werden unverändert übernommen — praktisch, wenn Ihr Code eine Quellenangabe, TODO-Notizen oder einen Lizenzhinweis enthält, der bleiben muss.
• <script>- und <style>-Blöcke werden verschoben, nicht neu geschrieben. Ihre Einrückung wird an die Stelle angepasst, an der sie im umgebenden HTML stehen, das JavaScript oder CSS darin wird jedoch nicht eigenständig neu formatiert. War der Code innerhalb eines Skript- oder Style-Blocks schon vorher unübersichtlich, bleibt er es — aufgeräumt wird nur seine Position im Verhältnis zum HTML ringsherum. Für den Inhalt selbst nutzen Sie bei Bedarf direkt JavaScript Beautifier oder CSS Beautifier.

Was Sie vorher wissen sollten

Mit typischem, wohlgeformtem HTML kommt dieses Werkzeug gut zurecht. Drei Punkte sollten Sie bei ungewöhnlicherem Markup aber prüfen, bevor Sie sich auf die Ausgabe verlassen:

• Einige selbstschließende HTML5-Elemente werden nicht als selbstschließend erkannt. Die Liste der Tags, die dieses Werkzeug ohne schließendes Gegenstück akzeptiert, ist gegenüber der Liste der Void-Elemente in der aktuellen HTML-Spezifikation um einige neuere Einträge unvollständig — konkret fehlen <source> (innerhalb von <video>, <audio> und <picture>), <track> (innerhalb von <video> für Untertitel) und <col> (innerhalb von <colgroup> in Tabellen). Kommen diese Tags in Ihrem HTML in der üblichen Schreibweise vor — also ohne ausdrücklichen abschließenden /> —, kann alles danach eine Ebene zu tief eingerückt werden, weil der Formatierer weiter auf ein schließendes Tag wartet, das nie kommt. Schreiben Sie diese Tags mit ausdrücklichem Schrägstrich (<source />), tritt das Problem nicht auf.
• Defektes HTML wird nicht repariert. Bleibt ein Tag in Ihrem Ausgangscode ungeschlossen oder passen Tags nicht zusammen, formatiert dieses Werkzeug die vorgefundene Struktur zwar ohne abzustürzen, es ergänzt aber kein fehlendes schließendes Tag und behebt das zugrunde liegende Problem auch sonst nicht. Was in der Eingabe fehlte, fehlt auch in der Ausgabe — es ist ein Formatierer, kein Validator.
• Inline-Tags mitten im Satz können auf einer eigenen Zeile landen. Tags wie <strong>, <em> oder <a> innerhalb eines Fließtextabsatzes können von den umgebenden Wörtern getrennt auf eigene Zeilen rutschen, denn dieses Werkzeug behandelt sie nicht als „inline zu halten“, wie manche anderen Formatierer es tun. An der Darstellung im Browser ändert das nichts — Leerraum zwischen Tags wird ohnehin zusammengefasst —, damit rechnen sollten Sie aber, wenn Sie textlastige Inhalte mit vielen Auszeichnungs-Tags formatieren.

Nichts davon ändert etwas daran, was das HTML im Browser tatsächlich bewirkt — es geht durchweg darum, wie der Code aussieht, wenn ein Mensch ihn direkt liest, nicht darum, wie eine Seite angezeigt wird.

Wann dieses Werkzeug das richtige ist

• Das HTML einer echten Seite lesen und daraus lernen. Der Quelltext einer Website oder die Ansicht in den Entwicklerwerkzeugen des Browsers zeigt oft komprimiertes oder automatisch erzeugtes Markup mit wenig Struktur — formatiert lässt sich endlich studieren, wie eine Seite gebaut ist: ein echter Beitrag zur digitalen Lesekompetenz, weit über das Aufräumen des eigenen Codes hinaus.
• Eine HTML-Aufgabe eines Schülers durchsehen. Zwischen Editoren hin- und herkopierter oder aus einem Seitenbaukasten exportierter Code verliert manchmal seine ursprüngliche Formatierung; ihn vor dem Lesen zu formatieren beschleunigt Korrektur und Rückmeldung.
• Markup untersuchen, das nicht richtig dargestellt wird. In dichtem, unformatiertem HTML ist ein fehlendes oder falsch platziertes Tag schwerer zu entdecken — nach dem Formatieren springt das eigentliche Strukturproblem meist eher ins Auge, wobei dieses Werkzeug ein wirklich defektes Tag nicht für Sie repariert.

Nutzt Ihr HTML viele <source>-, <track>- oder <col>-Tags ohne ausdrücklichen Schrägstrich, prüfen Sie die Einrückung nach diesen Tags in der Ausgabe noch einmal — siehe die Einschränkung weiter oben. Für gewöhnliches Seiten-Markup ist dieses Werkzeug ein schneller Weg zu lesbarer Struktur, ganz ohne Editor oder Erweiterung.

Beispiel

Eine Schülerin soll die Startseite einer echten Website untersuchen und beschreiben, wie deren Hauptnavigation im HTML aufgebaut ist. Der Seitenquelltext zeigt eine einzige dichte, minifizierte Zeile ganz ohne Abstände. In dieses Werkzeug eingefügt und formatiert, wird daraus ordentlich eingerücktes Markup, an dem sich endlich ablesen lässt, welche <nav>-, <ul>- und <li>-Elemente ineinander verschachtelt sind und wie die Navigation zum Rest der Seite steht — genau die Art strukturellen Lesens, die sich in einer einzigen unformatierten Zeile kaum bewältigen lässt.

Häufige Fragen

Ändert das Formatieren die Darstellung des HTML?

Nein. Es ändern sich nur Abstände und Zeilenumbrüche — Tags, Attribute und Inhalte bleiben gleich, die Seite wird im Browser also in beiden Fällen identisch dargestellt.

Werden HTML-Kommentare entfernt?

Nein — Kommentare, auch bedingte Kommentare, bleiben unverändert in der Ausgabe erhalten.

Wird auch das CSS oder JavaScript in meinem HTML formatiert?

Nicht eigenständig. <script>- und <style>-Blöcke werden so verschoben, dass sie zur Einrückung des umgebenden HTML passen, der Code darin wird aber nicht für sich neu formatiert. Nutzen Sie dafür direkt JavaScript Beautifier oder CSS Beautifier.

Werden defekte oder nicht geschlossene Tags repariert?

Nein. Dieses Werkzeug formatiert die Struktur, die es vorfindet; es prüft HTML nicht auf Gültigkeit und ergänzt keine fehlenden schließenden Tags.

Werden <source>-, <track>- und <col>-Tags korrekt behandelt?

Nicht zuverlässig, wenn sie ohne ausdrücklichen Schrägstrich geschrieben sind — Inhalte danach können eine Ebene zu tief eingerückt werden. Die Schreibweise <source /> vermeidet das. Siehe „Was Sie vorher wissen sollten“ weiter oben.

Wird mein Code irgendwo gespeichert?

Nein. Das eingefügte HTML wird verarbeitet, um das formatierte Ergebnis zu erzeugen, und danach nicht aufbewahrt; festgehalten wird nur, dass das Werkzeug benutzt wurde, nicht der Code selbst.

Welche verwandten Werkzeuge kann ich nutzen?

Nutzen Sie JavaScript Beautifier oder CSS Beautifier, um das JavaScript oder CSS in Ihrem HTML zu formatieren, oder HTML Minifier, um fertiges HTML für den Produktiveinsatz wieder zu komprimieren.