HTML formatieren
Markup jeder Seite verschönern und prüfen

Was ein HTML-Formatierer macht

Ein Browser lehnt nie eine Seite ab. Deshalb werden ein offener Absatz, ein Listeneintrag ohne End-Tag und eine offene Tabellenzelle trotzdem angezeigt, weil der Parser die Lücken beim Lesen still füllt. Das Markup hinter einer Live-Seite ist daher meist lockerer als der Quelltext, mit dem man gern arbeiten würde.

Genau für diese Lücke gibt es diesen HTML-Formatierer. Weil er Ihr Markup nach denselben Regeln liest wie ein Browser, schließt er die implizit gelassenen Tags, korrigiert die Einrückung, ordnet die Attribute und gibt Ihnen etwas zurück, das Sie wirklich lesen können.

Neben dem Aufräumen notiert er jede Entscheidung. Zum Beispiel landen ein implizites Listenende, ein leeres Element mit schließendem Schrägstrich oder ein loses Tag ohne Partner in einer Prüftabelle, mit Zeile und Spalte, wo sie stehen.

Er baut keine Seite und führt kein Skript aus, sodass ein von einer Kundenseite kopierter Markup-Block genauso gelesen wird wie Ihr eigener. Außerdem wird ein <script>- oder <style>-Block unverändert übernommen, denn sein Inhalt ist kein HTML, und eine Umformatierung würde ihn zerstören.

Auch verlässt nichts diesen Tab. Daher können Sie eine Vorlage unter NDA, eine halbfertige Komponente oder eine Seite, die Sie nie veröffentlichen würden, bedenkenlos einfügen.

Wie ein HTML-Formatierer Ihr Markup liest

Der erste Durchgang zerlegt den Text in Tokens. Ein Start-Tag, ein End-Tag, ein Textstück, ein Kommentar und der doctype sind verschiedene Dinge, und der Leser entscheidet Zeichen für Zeichen, was er vor sich hat.

Der zweite Durchgang ordnet diese Tokens zu einem Baum, und dort wird die Struktur geprüft. Das Regelwerk ist die HTML-Parsing-Spezifikation der WHATWG, dasselbe Dokument, dem jeder Browser folgt.

Diese Reihenfolge erklärt das meiste, was die Prüftabelle sagt. Weil manche Tags absichtlich offen bleiben dürfen, beendet ein neues <li> das vorige, und eine neue Zeile schließt die letzte Zelle. Der Baum, den der Leser baut, ist daher ordentlicher als der Text, den Sie ihm gegeben haben.

Drei Arten von Elementen werden besonders behandelt. Erstens hat ein leeres Element wie <br> oder <img> nie ein schließendes Tag. Zweitens behält ein Rohtext-Element wie <script>, <style> oder <textarea> seinen Inhalt wörtlich. Drittens behält <pre> seinen Leerraum, denn in diesem Element ist Leerraum Inhalt.

Groß- und Kleinschreibung ist eine Entscheidung, keine Regel. Standardmäßig lässt der Formatierer Ihre Tag- und Attributnamen genau so, wie sie sind, sodass ein Inline-<svg>viewBox und linearGradient so schreibt, wie SVG es verlangt. Trotzdem schreibt ein einziger Schalter alles klein, wenn Sie den schlichteren HTML-Stil möchten.

Warum Verschönern und Minifizieren denselben Leser nutzen

Beide Modi lesen das Markup gleich und bauen denselben Baum. Dann gibt der eine Modus diesen Baum über viele eingerückte Zeilen aus, und der andere ohne die Lücken zwischen den Tags.

Der Unterschied liegt also nur im letzten Schritt. Weil Minifizieren Leerraum zusammenfasst statt ihn zu löschen, bleibt ein Leerzeichen zwischen zwei Inline-Tags erhalten, denn ohne es würden zwei Wörter auf der Seite zusammenkleben.

Dieser gemeinsame Leser ist der Grund, warum die Prüfungen in beiden Modi gleich sind. Ein fehlendes End-Tag wird ergänzt, ob Sie verschönern oder minifizieren, und der Hinweis erscheint in beiden Fällen.

Kurz gesagt: Verschönern Sie, wenn Sie das Markup lesen oder bearbeiten wollen, und minifizieren Sie, wenn Sie es ausliefern. Für eine Seite, die Sie gleich bereitstellen, erledigt der eigene HTML-Minifier dieselbe Verkleinerung mit ein paar Optionen mehr.

Die Prüfungen und was jeder Hinweis bedeutet

Der erste Hinweis ist ein implizites End-Tag. Weil sich ein <li>, ein <p> oder eine Tabellenzeile selbst schließen dürfen, ergänzt der Formatierer das End-Tag und sagt Ihnen, wo, sodass der Baum eindeutig ist, auch wenn Ihr Quelltext es nicht war.

Der zweite ist ein leeres Element mit End-Tag. Ein </br> oder ein schließendes Tag an einem <img> bedeutet nichts, daher entfernt der Leser es und vermerkt die Stelle, statt ein verwirrendes Paar stehen zu lassen.

Der dritte ist ein schließendes Tag ohne Partner. Wenn ein End-Tag zu nichts auf dem Stapel passt, kann der Leser es nicht zuordnen, also markiert er die Zeile, statt zu raten, welches offene Tag Sie meinten.

Der vierte ist ein Element, das nie geschlossen wird. Läuft ein <div> oder ein <span> offen bis zum Dateiende, nennt der Hinweis das Tag, mit dem es begann, denn genau das müssen Sie finden.

Der fünfte ist ein doppeltes Attribut. Zwei class-Werte an einem Tag bedeuten, dass ein Browser den ersten behält und den zweiten ignoriert, daher zeigt der Leser auf das Paar, bevor es Ihr Styling still verändert.

Der sechste stoppt alles, und er ist der einzige, der das tut. Ein Kommentar, ein doctype oder ein <script>-Block ohne Ende läuft über das Dateiende hinaus, daher kann der Leser nicht fertig werden, und nichts wird ausgegeben, bis Sie ihn schließen.

Was dieser HTML-Formatierer nicht macht

Er stellt Ihre Seite nicht dar. Hier wird kein Bild geladen, kein Skript ausgeführt und kein Stylesheet angewendet, sodass das Markup nicht auf den Tab wirken kann, während Sie es lesen.

Er validiert das Markup nicht vollständig. Ein Formatierer prüft die Struktur, nicht das Regelwerk, sodass ein <div> in einem <span> oder eine von zwei auf vier übersprungene Überschriftenebene ordentlich eingerückt herauskommt und trotzdem falsch ist. Aufgeräumt ist nicht gleich gültig.

Er repariert Ihren Code nicht über die Struktur hinaus. Ein erschlossenes End-Tag wird ergänzt und vermerkt, weil das Lesen des Baums es erfordert, aber der Formatierer schreibt nie Ihre Attribute um und ordnet Ihren Inhalt nie neu.

Er fasst nichts an, was kein HTML ist. Der Inhalt eines <script>, eines <style> oder eines <pre> wird genau übernommen, also prüfen Sie diese mit dem JavaScript-Validator oder dem CSS-Validator, wenn Sie sie ebenfalls geprüft haben wollen.