HTML-Formatierungstool

HTML-Formatierung bringt ungeordneten oder komprimierten Markup-Code in eine lesbare Struktur mit konsistenter Einrückung, Zeilenumbrüchen und klar erkennbaren Tag-Hierarchien. Das erleichtert Review, Debugging, Unterricht, Teamübergaben und das Finden von nicht geschlossenen Tags, falsch verschachtelten Elementen oder unübersichtlichen Attributen. Für Produktionsdateien kann das Gegenteil sinnvoll sein: Minifizierung entfernt überflüssige Leerzeichen, Kommentare und Umbrüche, um die Übertragung zu verkleinern. Das Werkzeug hilft beim Wechsel zwischen Lesbarkeit und kompakter Ausgabe, verändert aber nicht die semantische Qualität des HTML. Ungültige Struktur, Accessibility-Probleme oder unsichere eingebettete Inhalte müssen weiterhin separat geprüft werden. Besonders bei produktiven Daten oder Codebasen sollte das Ergebnis anschließend mit Parser, Tests oder Projektregeln geprüft werden.

Ein HTML-Formatter folgt dem Baumkonstruktions-Algorithmus des WHATWG HTML Standards. Bytes werden decodiert (typischerweise UTF-8 gemäß dem Meta-Charset oder BOM), der Tokenizer durchläuft die Zustände data, RCDATA, RAWTEXT, script-data und mehrere Attributzustände gemäß §13.2.5, und die Baumkonstruktionsphase erstellt einen DOM mittels der Insertion-Mode-Zustandsmaschine (initial, before html, in head, in body, in table, in select usw.). Der Parser ist nach Entwurf fehlertolerant: nicht geschlossene <p>-Tags werden automatisch geschlossen, wenn ein Block folgt, verirrte </tr> werden ignoriert, und falsch platzierte <table>-Elemente werden per Foster Parenting umgesetzt. Parser in Browserqualität stellen dies über new DOMParser().parseFromString(src, 'text/html') bereit; Node-seitige Tools verwenden parse5 (die referenzielle WHATWG-Implementierung), htmlparser2 oder cheerio. Die Neuausgabe durchläuft den resultierenden Baum und serialisiert nach Elementkategorie. Void-Elemente – area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr – erhalten in HTML5 nie ein schließendes Tag (die XHTML-Selbstschließung /> ist erlaubt, aber optional). Blockebenen-Container (div, section, article, header, footer, nav, main, ul, ol, li, table) bekommen ihre eigene Zeile bei depth×Einrückungs-Leerzeichen; Inline-/Phrasierungsinhalt (span, a, strong, em, code) bleibt inline, da CSS white-space: normal Leerzeichenfolgen zu einem einzigen Zeichen kollabiert. Zwei Elementtypen müssen wörtlich erhalten bleiben: <pre> und <textarea> tragen white-space: pre-Semantik, und ihr führendes Newline wird vom Parser konsumiert; <script>- und <style>-Inhalte sind RAWTEXT – eine Neu-Einrückung würde das Laufzeitverhalten ändern, daher werden sie normalerweise an einen JS- oder CSS-Unterformatter delegiert und wieder eingebettet. Die Attributserialisierung normalisiert die Zitierung (einfach vs. doppelt) und kodiert eingebettete Trennzeichen über die benannten Zeichenreferenzen &amp;, &lt;, &gt;, &quot; und die numerische &#39; neu. Die Attributreihenfolge ist im DOM nicht signifikant, daher wenden Formatter typischerweise eine stabile Reihenfolge an (id, class, dann alphabetisch). Zeilenumbruch greift bei Überschreitung der konfigurierten printWidth: Attribute werden eines pro Zeile aufgeteilt, wobei das schließende > entweder auf einer eigenen Zeile steht (prettier-plugin-html bracketSameLine: false) oder am letzten Attribut klebt. Die Minifizierung kehrt den Prozess um – Whitespace zwischen Block-Tags wird entfernt, Kommentare werden bis auf IE-Conditionals <!--[if gelöscht, und Anführungszeichen werden bei Attributen entfernt, deren Wert [A-Za-z0-9._-]+ entspricht. Beide Operationen sind O(n) über die Eingabelänge.

• Parser: WHATWG HTML-Baumkonstruktion (§13) über DOMParser('text/html') im Browser, parse5/htmlparser2/cheerio auf Node; Insertion-Mode-Zustandsmaschine behandelt fehlende/falsch platzierte Tags und Foster Parenting.
• Void-Elemente (kein End-Tag): area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr – 14 Elemente gemäß HTML Living Standard. XHTML-Selbstschließung /> wird toleriert, ist aber redundant.
• Leerzeichenerhaltende Elemente: <pre> und <textarea> tragen CSS white-space: pre und konsumieren ein führendes Newline; deren Inhalt wird nie neu eingerückt, sonst ändert sich die sichtbare Ausgabe.
• RAWTEXT-Kontexte: <script>- und <style>-Inhalte sind kein HTML – sie werden an JS/CSS-Unterformatter delegiert (oder wörtlich belassen). Neu-Einrückung von Roh-Text innerhalb eines Regex- oder String-Literals würde die Laufzeitsemantik verändern.
• Attributnormalisierung: Zitierstil gewählt (einfach/doppelt), eingebettete Trennzeichen mit den fünf benannten Referenzen (&amp;, &lt;, &gt;, &quot;, &#39;) neu kodiert, stabile Reihenfolge angewendet (id, class, dann alphabetisch), da die DOM-Reihenfolge nicht signifikant ist.
• Umbruch bei Überschreitung von printWidth (typisch 80/100/120): Attribute werden eines pro Zeile aufgeteilt, wobei das schließende > entweder auf einer eigenen Zeile steht oder am letzten Attribut klebt, analog zur Option bracketSameLine von prettier-plugin-html.
• Minifizierung: Kollabiert von Whitespace zwischen Tags, entfernt Kommentare (Erhalt von <!--[if IE]>-Conditionals), entfernt optionale End-Tags (</li>, </p> wenn von einem Geschwisterelement gefolgt), und entfernt Anführungszeichen bei Attributen, die [A-Za-z0-9._-]+ entsprechen; Roundtrip ist O(n).