HTML formatieren
Der HTML-Formatierer und -Minifizierer rückt Markup in Ihrem Browser neu ein und minifiziert es. HTML ist kein XML, und wer es formatiert, als wäre es eines, beschädigt Dokumente auf vier konkrete Arten – Void-Elemente, Raw-Text-Elemente, optionale schließende Tags und signifikanter Leerraum zwischen Inline-Elementen –, und jede dieser Arten wird hier ausdrücklich behandelt.
Wie funktioniert HTML formatieren?
Die meisten HTML-Formatierer sind XML-Formatierer unter anderem Namen, und jeder der vier Unterschiede zwischen beiden hat schon einen echten Bug produziert.
Void-Elemente öffnen keinen Scope
<br>, <img>, <input>, <hr> und zehn weitere haben kein schließendes Tag – nicht optional, sondern überhaupt nicht. Ein Formatierer, der bei jedem öffnenden Tag die Einrückung erhöht, schiebt alles nach dem ersten <img> eine Stufe nach rechts und kommt nie wieder zurück; eine Seite mit zwanzig Bildern ist am Ende bis über den Bildschirmrand hinaus eingerückt.
script und style enthalten Text, kein Markup
Ein < innerhalb von <script> ist ein Kleiner-als-Zeichen. Ihn als Tag zu parsen ist der Weg, auf dem if (a < b) zu einem verstümmelten Dokument wird – und deshalb enthält das Beispiel oben genau diesen Ausdruck. Der Inhalt von <script>, <style>, <textarea> und <title> wird als Ganzes genommen, bis zum passenden schließenden Tag.
Leerraum zwischen Inline-Elementen wird gerendert
<b>a</b> <i>b</i> wird als “a b” gerendert; ohne das Leerzeichen als “ab”. Ein Formatierer, der jedes Element in eine eigene Zeile setzt, hat damit in jeden Textfluss des Dokuments ein Leerzeichen eingefügt – das klassische Symptom ist eine überzählige Lücke vor jedem Satzpunkt und nach jedem Link. Inline-Elemente bleiben deshalb in einem gepufferten Verbund, und nur Block-Elemente beginnen eine Zeile. Dieselbe Regel ist der Grund, warum <pre>-Inhalt nie neu eingerückt wird: Dort ist der Leerraum das Layout.
Schließende Tags sind für mehrere Elemente optional
</li>, </p>, </td> und Verwandte dürfen weggelassen werden, und viel handgeschriebenes HTML lässt sie weg. Ein Formatierer mit strengem Tag-Stack verwirft das Dokument entweder oder bringt seine Einrückung durcheinander. Hier wird der Stack abgebaut, wenn ein schließendes Tag eintrifft, das nicht zum obersten passt – durch alle Elemente hindurch, deren schließendes Tag optional ist.
Was die Analyse meldet
Ein <img> ohne alt-Attribut wird markiert, weil ein Screenreader notfalls den Dateinamen vorliest – was schlimmer ist als Schweigen und der Grund, warum ein dekoratives Bild alt="" braucht statt gar keines Attributs. Nicht geschlossene Elemente werden namentlich genannt: Der Browser erholt sich, aber an welcher Stelle er sie schließt, entscheidet er und nicht Sie – und beides weicht oft voneinander ab.
Eingabe
<div><br><p>text</p></div>
Formatiert
<div>
<br>
<p>
text
</p>
</div>Welche Optionen und Sonderfälle unterstützt HTML formatieren?
| Parameter | Typ | Standard | Verhalten & Sonderfälle |
|---|---|---|---|
| Einrückung | Leerzeichen | 2 | Pro Einrückungsebene. Leere Elemente fügen keine Ebene hinzu. |
| Attributumbruch | Anzahl | 4 | Tags mit mindestens dieser vielen Attributen oder länger als 100 Zeichen, jedes Attribut in eine eigene Zeile. |
| Rohtext erhalten | Boolesch | on | pre- und textarea-Inhalte werden nie verändert, da ihr Whitespace gerendert wird. script- und style-Inhalte werden neu eingerückt, was sicher ist. |
| Void-Elemente | 14 Elemente | — | area base br col embed hr img input link meta param source track wbr. Keines davon öffnet einen Geltungsbereich. |
| Rohtext-Elemente | script, style, textarea, title, pre | — | Der Inhalt ist Text und nicht Markup. Ein < innerhalb eines script ist ein Kleiner-als-Zeichen, und das Parsen als Tag beschädigt das Dokument. |
| Inline-Elemente | im Textfluss behalten | — | a, b, span, em, img und der Rest bleiben in der Zeile, in der sie waren, da ein Zeilenumbruch zwischen ihnen als Leerzeichen gerendert wird. |
| Optionales Schließen | toleriert | — | li, p, td, tr, option und andere können ihr schließendes Tag weglassen. Der Stack wird abgewickelt, anstatt das Dokument abzulehnen. |
| Attribut-Anführungszeichen | normalisiert | doppelt | Sofern der Wert keine doppelten Anführungszeichen enthält, werden doppelte Anführungszeichen verwendet. Boolesche Attribute behalten ihre nackte Form. |
| Minifizieren | Leerzeichen | — | Fügt Leerzeichenläufe zusammen, behält aber einen einzelnen Raum bei, wo Inline-Elemente aufeinandertreffen, und erhält pre-Inhalte. Bedingte Kommentare überleben, weil sie Markup für alten IE sind. |
Häufig gestellte Fragen
Warum steht mein Inline-Element nicht in einer eigenen Zeile?
Weil es dort das verändern würde, was die Seite rendert. <b>a</b> <i>b</i> zeigt „a b“; ohne das Leerzeichen zwischen den Tags zeigt es „ab“. Ein Formatierer, der jedes Element in eine eigene Zeile bricht, fügt in jeden Textfluss des Dokuments ein Leerzeichen ein, und das Symptom ist eine überzählige Lücke vor jedem Satzpunkt. Inline-Elemente bleiben in dem Verbund, in dem sie stehen.
Warum wurde der Inhalt meines <pre> in Ruhe gelassen?
Weil in einem <pre> der Leerraum der Inhalt ist. Ihn neu einzurücken verändert, was Leser sehen – das Gegenteil von Formatierung. Dasselbe gilt für <textarea>, wo der Leerraum der Wert des Feldes ist. Der Inhalt von script und style wird neu eingerückt, weil sein Leerraum nicht gerendert wird.
Mein HTML hat keine schließenden </li>-Tags. Ist das kaputt?
Nein – HTML erlaubt es, das schließende Tag bei li, p, td, tr, option, thead und mehreren anderen wegzulassen, und viel handgeschriebenes Markup macht davon Gebrauch. Der Formatierer baut seinen Stack ab, wenn er auf ein schließendes Tag trifft, das nicht zum obersten passt, also wird das Dokument korrekt formatiert. Ob Sie sie weglassen sollten, ist eine Stilfrage; ob der Parser damit klarkommt, ist es nicht.
Warum warnt es vor einem fehlenden alt-Attribut?
Weil ein <img> ohne alt einen Screenreader dazu bringt, den Dateinamen vorzulesen – „i-m-g Unterstrich 4 0 2 1 Punkt p-n-g“ –, was schlimmer ist als nichts zu sagen. Die Abhilfe für ein dekoratives Bild ist alt="", was assistiven Technologien ausdrücklich sagt, dass sie es überspringen sollen. Ein fehlendes Attribut und ein leeres bedeuten Verschiedenes, und nur eines davon ist für Dekoration richtig.
Soll ich HTML minifizieren?
Nur als Teil eines Builds – und der Gewinn ist kleiner, als Sie vermuten, sobald gzip oder brotli im Spiel sind, denn Komprimierung beherrscht wiederholten Leerraum ohnehin sehr gut. Wofür Minifizierung wirklich etwas taugt, sind E-Mail-Templates, bei denen manche Clients große Nachrichten ablehnen, und inline kritisches CSS, wo die Bytes im kritischen Pfad liegen.
Wird mein Markup hochgeladen?
Nein. Tokenisieren und Formatieren laufen in Ihrem Browser, was Sie im Network-Panel überprüfen können. Markup aus einer echten Anwendung trägt häufig Data-Attribute, interne URLs und inline JSON mit echtem Inhalt.