So verwenden Sie den HTML-Formatter
- Fügen Sie Ihr HTML in das Eingabefeld ein: eine ganze Seite, ein Template oder ein Fragment, das Sie aus den Entwicklertools Ihres Browsers kopiert haben.
- Klicken Sie auf Verschönern, um das Markup einzurücken, sodass jedes verschachtelte Element in einer eigenen Zeile steht.
- Klicken Sie auf Minifizieren, um Kommentare und überflüssigen Leerraum zu entfernen und eine kleinere Datei zu erhalten.
- Kopieren Sie das Ergebnis zurück in Ihren Editor oder Ihr CMS.
Der Formatter arbeitet vollständig in Ihrem Browser. Ihr Markup wird weder hochgeladen noch gespeichert und als reiner Text behandelt: Nichts von dem, was Sie einfügen, wird ausgeführt.
Warum HTML formatieren?
HTML aus Page-Buildern, E-Mail-Editoren, CMS-Exporten und Build-Tools ist oft minifiziert oder schlecht eingerückt. Für Browser ist das kein Problem, für Menschen ist die Struktur dann aber schwer nachzuvollziehen. Verschönertes HTML zeigt den Dokumentbaum übersichtlich, sodass Sie sehen, welches <div> wo geschlossen wird, ein falsch platziertes Element finden und Änderungen in einem Diff prüfen können.
Minifizieren funktioniert umgekehrt. Das Entfernen von Kommentaren, Einrückungen und Zeilenumbrüchen macht die Datei kleiner und verringert so die Übertragungsgröße ein wenig. Auf den meisten Websites verkleinert die Serverkomprimierung (gzip oder Brotli) HTML bereits erheblich, das Minifizieren bringt also nur einen kleineren zusätzlichen Gewinn, ist in Produktions-Builds aber trotzdem üblich.
Häufige HTML-Probleme und wie Sie sie beheben
Browser sind nachsichtig: Der HTML-Parsing-Algorithmus fängt die meisten Fehler ab, statt abzubrechen. Das ist praktisch, bedeutet aber, dass fehlerhaftes Markup oft „fast richtig“ dargestellt wird und verwirrende Layoutfehler verursacht. Durch das Verschönern werden diese Probleme leichter sichtbar.
Nicht geschlossene Elemente. Wandert die Einrückung immer weiter nach rechts und kommt nie zurück, wurde wahrscheinlich ein Element nicht geschlossen:
<div class="card">
<div class="card-body">
<p>Hello
</div>Das einzelne </div> schließt card-body (und beendet implizit den Absatz), sodass das äußere card offen bleibt und alles Nachfolgende verschluckt. Schließen Sie jedes Element ausdrücklich:
<div class="card">
<div class="card-body">
<p>Hello</p>
</div>
</div>Block-Elemente in Inline-Elementen oder in <p>. Ein <div> innerhalb eines <p> ist nicht erlaubt: Der Browser schließt den Absatz vorzeitig, und Ihr CSS greift nicht mehr wie erwartet.
Falsch verschachtelte Tags. <b><i>text</b></i> sollte <b><i>text</i></b> lauten. Innere Elemente müssen vor den äußeren geschlossen werden.
Doppelte IDs. Eine id muss im Dokument eindeutig sein. Duplikate stören getElementById, die Zuordnung von Labels und Sprungmarken innerhalb der Seite.
Leere Elemente und Leerraum
Manche Elemente können nie Inhalt haben und haben kein schließendes Tag. Diese leeren Elemente (void elements) sind:
| Leere Elemente |
|---|
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr |
In HTML sind <br> und <br /> gleichwertig; der abschließende Schrägstrich ist optional. </br> oder <img></img> zu schreiben ist ein Fehler.
Leerraum zwischen Inline-Elementen kann sichtbar sein. Zwei Inline-Block-Buttons, die durch einen Zeilenumbruch getrennt sind, zeigen eine kleine Lücke, dieselben Buttons in einer Zeile dagegen nicht. Ein guter Formatter erhält den Inhalt von <pre> und <textarea> exakt, doch wenn sich das Layout nach dem Verschönern oder Minifizieren leicht verändert, ist meist Inline-Leerraum die Ursache.
Tipps und Best Practices
- Rücken Sie mit zwei Leerzeichen ein; tief verschachteltes HTML wird mit vier sehr breit.
- Lagern Sie große Inline-Blöcke mit
<style>und<script>in separate Dateien aus und räumen Sie sie mit dem CSS-Formatter und dem JavaScript-Formatter auf. - Minifizieren Sie als Teil Ihres Builds und nicht von Hand, damit der lesbare Quellcode in der Versionsverwaltung bleibt.
- Prüfen Sie nach dem Deployment die On-Page-SEO der Seite mit dem SEO-Check und ihre Ladezeit mit dem Website-Speedtest.
Häufig gestellte Fragen
Ändert das Verschönern das Aussehen meiner Seite?
In der Regel nicht. Einrückungen zwischen Block-Elementen haben keinen sichtbaren Effekt. Leerraum zwischen Inline-Elementen kann kleine Lücken erzeugen oder entfernen, prüfen Sie Seiten mit engen Inline-Layouts daher nach dem Formatieren.
Ist das ein HTML-Validator?
Nein. Er rückt Markup neu ein und minifiziert es, prüft es aber nicht gegen die HTML-Spezifikation. Durch das Formatieren lassen sich viele strukturelle Fehler jedoch leicht mit bloßem Auge erkennen.
Ist minifiziertes HTML besser für SEO?
Suchmaschinen lesen minifiziertes und formatiertes HTML gleich gut. Minifizieren kann Seiten etwas kleiner machen, was der Performance ein wenig hilft, aber Inhalt, Struktur und Geschwindigkeit zählen weit mehr als Leerraum.
Kann ich HTML-E-Mail-Vorlagen formatieren?
Ja. E-Mail-HTML setzt oft auf verschachtelte Tabellen und Inline-Styles, und durch das Verschönern lässt es sich viel leichter bearbeiten. Testen Sie das Ergebnis anschließend in Ihrer E-Mail-Plattform, da manche E-Mail-Programme empfindlich auf Leerraum reagieren.
Aktualisiert