Zum Inhalt springen
Seitensicht
Werkzeuge & Navigation

HTML formatieren

Unübersichtlichen Quelltext einrücken – oder für die Auslieferung verkleinern. Beides geschieht hier im Browser; der Code verlässt deinen Rechner nicht.

Eine dicht beschriebene Quelltextkarte wird in sauber eingerückte, gegliederte Zeilen umgewandelt.

So funktioniert’s

HTML wieder übersichtlich lesen

  1. HTML-Quelltext einfügen
  2. Einrücken oder verkleinern wählen
  3. Formatierten Code kopieren
Was soll passieren?

Was dabei zu beachten ist

Der Inhalt von <pre> und <textarea> bleibt Zeichen für Zeichen erhalten. Dort ist jedes Leerzeichen sichtbar – ein Formatierer, der es „aufräumt“, verändert die Darstellung.

Aus demselben Grund werden Elemente im Textfluss wie <a> oder <strong> nicht auf eigene Zeilen gesetzt: Ein Umbruch zwischen Wort und Link erzeugt im Browser ein zusätzliches Leerzeichen.

Beim Verkleinern fallen Kommentare weg – bedingte Kommentare für alte Internet-Explorer- Fassungen bleiben stehen, weil sie Anweisungen sind und keine Notizen. Der Gewinn ist meist bescheiden, sobald der Server komprimiert; das eigentliche Gewicht liegt fast immer bei Bildern und Skripten.

Wie viel deine Seite tatsächlich überträgt, zeigt der Seiten-Check.

Wann Einrücken wirklich hilft

Nicht beim Ausliefern – dort ist die Formatierung dem Browser gleichgültig. Sie hilft beim Lesen und beim Suchen: In eingerücktem Markup sieht man auf einen Blick, welches </div> zu welchem Anfang gehört. Das ist der häufigste Grund, warum ein Layout „plötzlich“ zerfällt – ein Element wurde eine Ebene zu früh geschlossen, und in einer einzigen langen Zeile fällt das niemandem auf.

Der zweite Fall ist der Vergleich zweier Fassungen. Liegt alles auf einer Zeile, meldet jedes Vergleichswerkzeug „diese eine Zeile hat sich geändert“ – und man sucht die eigentliche Änderung von Hand. Zeilenweise formatiert, zeigt derselbe Vergleich drei geänderte Zeilen.

Formatieren ist kein Prüfen

Ein Formatierer räumt auf, was da ist. Ob das Markup gültig ist, sagt er nicht: Ein fehlendes schließendes Element, ein doppeltes id-Attribut oder verschachtelte Absätze bleiben nach dem Einrücken genauso fehlerhaft – nur eben ordentlich eingerückt. Beides gehört zusammen, in dieser Reihenfolge: erst formatieren, dann prüfen lassen.