HTML-Formatter
HTML einfügen, um es mit einheitlicher Einrückung zu verschönern, oder in den Minifizierungsmodus wechseln, um Leerraum und Kommentare auf eine einzige Zeile zu reduzieren. 2 Leerzeichen, 4 Leerzeichen oder Tabs wählen. Codeblöcke innerhalb von <pre>, <script>, <style> und <textarea> bleiben unangetastet, damit nichts kaputtgeht. Vergleichen Sie Input- vs. Output-Größe, um zu sehen, wie viel Sie gespart haben.
Ihr HTML wird in Ihrem Browser verarbeitet und nicht auf einen Server hochgeladen.
So verwenden Sie diesen html-formatter
- Wählen Sie Formatieren (Verschönern) oder Minifizieren.
- Für Formatieren wählen Sie die Einrückung: 2 Leerzeichen, 4 Leerzeichen oder Tabulator.
- Fügen Sie Ihr HTML ein — die Ausgabe erscheint darunter mit einem Größenvergleich.
- Kopieren Sie die Ausgabe oder laden Sie sie als .html-Datei herunter.
Häufig gestellte Fragen
Wird der Inhalt von <pre>, <script> und <style> erhalten?
Ja. Inhalt innerhalb von pre, script, style und textarea wird als Rohtext behandelt und nicht neu eingerückt oder reduziert, sodass Codeblöcke unverändert bleiben.
Was entfernt die Minifizierung?
Alle HTML-Kommentare und unnötigen Leerraum zwischen Tags. Ein einzelnes Leerzeichen bleibt zwischen Text und Inline-Tags erhalten, damit die Darstellung im Browser unverändert bleibt.
Korrigiert es ungültiges HTML?
Nein. Der Formatter respektiert die übergebene Struktur. Wenn Ihr HTML ungültig ist (nicht geschlossene Tags usw.), kann auch die Ausgabe ungültig sein — beheben Sie zuerst das Markup.
Warum sieht mein formatiertes HTML anders aus als bei Prettier?
Jeder Formatter hat Meinungen: wo lange Attributlisten umbrechen, ob schließende Brackets in eigene Zeile, wie inline-Elemente in Block-Elementen behandelt werden. Dieses Tool zielt auf kompakte Lesbarkeit; Prettier bevorzugt breiteres Umbrechen bei 80 Zeichen. Wählen Sie pro Projekt einen Formatter und konfigurieren Sie ihn einmal — Mischen garantiert rauschige Git-Diffs.
Bricht der Formatter meine Vue / Svelte / JSX Templates?
Wahrscheinlich ja. Das ist ein HTML-Formatter, kein Framework-bewusster. Vues <template>-Tags sehen wie HTML aus, aber der Formatter ordnet Direktiv-Attribute (v-if, :class) so um, dass Ihr Linter sich beschwert. JSX ist gar kein HTML — für Komponenten-Dateien Prettier oder den offiziellen Formatter Ihres Frameworks nutzen. Dieses Tool ist sicher für reine .html-Dateien, E-Mail-Templates und exportiertes HTML aus einem CMS.