HTML- / XML-Formatierer & Validator

HTML oder XML einfügen und sauber eingerückt zurückerhalten, mit markierten Wohlgeformtheitsfehlern (XML) oder Warnungen zu nicht geschlossenen Tags (HTML).

1.225 Aufrufe

So funktioniert es

Der Formatierer durchläuft Ihr Markup und verfolgt dabei die Verschachtelungstiefe: jedes öffnende Tag erhöht den Tiefenzähler um eine Stufe, jedes passende schließende Tag senkt ihn wieder ab. Jede Ausgabezeile erhält eine Anzahl an führenden Einrückungseinheiten proportional zu ihrer aktuellen Tiefe — ein Tag eine Ebene tief bekommt eine Einrückungseinheit, ein Tag vier Ebenen tief bekommt vier, und so weiter. Textknoten, Kommentare und Attribute übernehmen die Tiefe des sie umgebenden Elements, sodass das Ergebnis die tatsächliche Baumstruktur des Dokuments visuell widerspiegelt statt einer ununterbrochenen Textwand.

Ein gedrängter Einzeiler wie <ul><li>A</li><li>B</li></ul> kommt beispielsweise so zurück: <ul> auf oberster Ebene, <li>A</li> und <li>B</li> jeweils eine Ebene eingerückt, und das schließende </ul> wieder auf oberster Ebene — drei Zeilen statt einer, wobei die Tiefe jeder Zeile allein an der Einrückung sofort ablesbar ist. Leere Elemente wie <br> oder <img> erhöhen den Tiefenzähler nie, da sie keine Kinder haben, in die etwas verschachtelt werden könnte.

Gut zu wissen

Wählen Sie den XML-Modus, ist der Parser streng: jede Verletzung der Wohlgeformtheit — ein nicht geschlossenes Tag, falsche Verschachtelung, ein ungültiges Zeichen — wird mit einer konkreten Fehlermeldung gemeldet, statt still übergangen zu werden. Wählen Sie den HTML-Modus, führt das Tool stattdessen eine bestmögliche Tag-Balance-Prüfung durch, weil Browser HTML selbst nachsichtig parsen und es keinen vergleichbaren harten „ungültig"-Zustand zu erkennen gibt. Diese Trennung spiegelt einen echten Unterschied zwischen den beiden Formaten wider: XMLs Spezifikation verlangt, dass ein Dokument entweder wohlgeformt ist oder komplett abgelehnt wird, ohne Mittelweg, während HTML5 bewusst so gestaltet wurde, dass kleine Fehler beim Verfassen — wie ein vergessenes schließendes Tag — die Seite nicht zerstören. Diese nachsichtige Tradition ist auch der Grund, warum <br/> in XML zwingend ist, während <br> und <br/> in HTML beide gültig und austauschbar sind.

Das ist weit über das Aufräumen handgeschriebenen Markups hinaus nützlich. Minifiziertes HTML von einer Live-Seite, eine als eine dichte Zeile zurückgegebene XML-API-Antwort oder eine ohne jede Formatierung exportierte Konfigurationsdatei werden alle deutlich lesbarer — und ein falsch platziertes Tag lässt sich viel leichter erkennen — sobald tiefenbasierte Einrückung angewendet wird. Da die Einrückung aus der geparsten Struktur neu berechnet wird statt aus der Eingabe kopiert zu werden, ist die Ausgabe stets konsistent, egal wie uneinheitlich die ursprüngliche Formatierung war.

Häufig gestellte Fragen

Warum findet der XML-Modus Fehler, die der HTML-Modus übersieht?

XML hat eine strenge Wohlgeformtheitsspezifikation — der XML-Parser des Browsers weist alles zurück, was diese verletzt. Das HTML-Parsing ist bewusst nachsichtig (ein zentrales Designziel, damit das Web nicht bei kleinen Fehlern zusammenbricht), daher gibt es keinen entsprechenden harten Fehler — dieses Tool führt stattdessen für HTML eine bestmögliche Tag-Balance-Prüfung durch.

Wie entscheidet das Tool, wie stark jede Zeile eingerückt wird?

Es verfolgt die Verschachtelungstiefe während des Parsens: das Öffnen eines Tags erhöht die Tiefe um eins, das Schließen senkt sie um eins, und jede Zeile wird proportional zu ihrer Tiefe an dieser Stelle eingerückt. Ein Element, das drei Ebenen tief im Baum liegt, erhält drei Einrückungseinheiten, unabhängig davon, wie lang oder kurz die umgebenden Tags sind.

Warum ist <br/> in XML erforderlich, aber in HTML optional?

XML kennt kein eingebautes Konzept eines „leeren" Elements — jedes Tag muss entweder mit einem separaten schließenden Tag oder dem selbstschließenden Schrägstrich explizit geschlossen werden, sonst ist das Dokument nicht wohlgeformt. HTML5 definiert stattdessen eine feste Liste leerer Elemente (br, img, input, hr und weitere), von denen Browser bereits wissen, dass sie nie Kinder haben, sodass sowohl <code>&lt;br&gt;</code> als auch <code>&lt;br/&gt;</code> identisch geparst werden.

Verändert die Formatierung meinen Inhalt?

Nein — nur Leerraum und Einrückung ändern sich. Tags, Attribute, Text und Kommentare bleiben exakt erhalten (Attributwerte werden zur Sicherheit neu escaped, was nur die Anführungszeichen ändern kann, niemals den Wert selbst).

Funktioniert das bei einem tief verschachtelten oder minifizierten Dokument?

Ja — der auf Tiefenverfolgung basierende Ansatz kümmert sich nicht darum, wie die Eingabe ursprünglich formatiert war oder wie tief sie verschachtelt ist; eine minifizierte einzeilige Datei und eine unordentlich von Hand eingerückte erzeugen dieselbe saubere Ausgabe, da die Einrückung aus der Tag-Struktur selbst neu berechnet wird, statt aus der Eingabe übernommen zu werden.

Kommentare

Noch keine Kommentare — schreiben Sie den ersten!

Ähnliche Tools