So nutzt du: HTML Formatter
- Füg dein HTML in das Feld Eingabe-HTML ein, zieh eine
.html-Datei hinein oder klick auf Beispiel. - Wähle im Modus Formatieren die Einrückung (2 Leerzeichen, 4 Leerzeichen oder Tabs), die Zeilenbreite und wie die Attribute angeordnet werden sollen.
- Das Ergebnis aktualisiert sich beim Tippen. Mit Kopieren oder Herunterladen speicherst du es.
- Brauchst du das Gegenteil? Wechsle zu Minifizieren, um Kommentare zu entfernen und Leerraum für die Produktion zusammenzuziehen.
Was ist ein HTML Formatter?
Ein HTML Formatter (oder Beautifier) schreibt Markup so um, dass jedes Element in einer eigenen Zeile steht und die Einrückung der Dokumentstruktur folgt. So siehst du auf einen Blick, wo sich ein <div> schließt. Das ist der schnellste Weg, den Quelltext eines Page-Builder-Exports, einer E-Mail-Vorlage, eines CMS-Snippets oder eines für die Produktion minifizierten HTML-Codes zu lesen. Dieses Tool nutzt die Open-Source-Engine js-beautify, dieselbe Formatierung, die auch die integrierte HTML-Formatierung von VS Code verwendet. Außerdem formatiert es das CSS innerhalb von <style>-Tags und das JavaScript innerhalb von <script>-Tags.
Die Formatierungsoptionen erklärt
| Option | Was sie macht |
|---|---|
| Einrückung | Zwei Leerzeichen sind bei HTML die gängigste Konvention; Tabs erlauben jedem Entwickler, die eigene Breite festzulegen. |
| Umbruch | Bricht lange Textzeilen und Attribute ungefähr bei der gewählten Spalte um. „Aus“ hält den Inhalt jedes Elements in einer Zeile. |
| Attribute | „Eine pro Zeile“ setzt jedes Attribut auf eine eigene Zeile, wenn ein Tag mehrere hat. Praktisch bei langen Tailwind- oder Alpine.js-Tags und für saubere Git-Diffs. |
| <head> & <body> einrücken | Rückt die Kinder von <head> und <body> eine zusätzliche Ebene ein, statt sie bündig mit <html> zu lassen. |
| Leerzeilen beibehalten | Behält (maximal) eine bewusst gesetzte Leerzeile zwischen Blöcken, statt alle zu entfernen. |
Inline-Elemente wie <a>, <strong> und <span> bleiben in ihrer Textzeile. Der Inhalt von <pre> und <textarea> wird nie angefasst, denn eine Änderung des Leerraums dort würde verändern, was Nutzer sehen.
So funktioniert der sichere HTML-Minifier
Leerraum in HTML ist nicht immer bedeutungslos: <b>Hallo</b> <i>Welt</i> zeigt ein sichtbares Leerzeichen zwischen den Wörtern. Der Minifier geht deshalb konservativ vor:
- Entfernt Kommentare, außer Internet-Explorer-Conditional-Comments (aktiviere Kommentare behalten, um alle zu behalten).
- Fasst Folgen von Leerzeichen, Tabs und Zeilenumbrüchen im Text zu einem einzelnen Leerzeichen zusammen – genau das, was der Browser ohnehin anzeigt.
- Entfernt Leerraum nur dort, wo er nie dargestellt wird: innerhalb von
<head>, rund um<html>,<body>, Tabellenzeilen und Listencontainer. - Bereinigt Tags (
<p class = "a">wird zu<p class="a">), ohne Attributwerte zu verändern. - Lässt
<pre>,<textarea>und Template-Skripte unverändert, minifiziert Inline-CSS, verdichtet JSON-LD und minifiziert Inline-JavaScript nur, wenn es die Syntaxprüfung besteht.
Typische Einsparungen liegen vor gzip bei 10–25 %. Für eine vollständige Build-Pipeline können Tools wie html-minifier-terser weitergehen (etwa optionale Tags oder Anführungszeichen entfernen), allerdings mit riskanteren Transformationen. Um speziell Stylesheets zu verkleinern, nutze den CSS Minifier; für Skripte bietet der JavaScript Formatter einen eigenen Minify-Modus.
Häufige Probleme
Die Einrückung wirkt nach einem Tag falsch. Meist fehlt ein schließendes Element (etwa ein </div>). Der Formatter rückt dann alles danach eine Ebene zu tief ein, wodurch der Fehler leicht auffällt. Template-Syntax wie Handlebars, Liquid, Jinja oder PHP-Blöcke wird erkannt und erhalten, aber komplexe Template-Logik innerhalb von Attributen kann trotzdem ungewöhnliche Zeilenumbrüche erzeugen.
Auch gesucht als: html formatieren, html beautifier, html prettifier, html einrücken, html minifier, html minifizieren, html code formatieren, html online formatieren.
Passende Tools zu: HTML Formatter
- CSS Formatter — Verwandle ein minifiziertes Stylesheet in gut lesbares CSS mit einer Eigenschaft pro Zeile und sauber verschachtelten @media-Blöcken.
- HTML-Entity-Encoder — Maskiere < > & ", damit Text sicher in HTML angezeigt werden kann, wandle Akzente und Symbole in benannte oder numerische Entities um oder decodiere HTML mit Entities zurück in Klartext.
- HTML zu Markdown — Füge HTML ein – oder kopiere Rich Text direkt aus einer Webseite, einem Google Doc oder einer E-Mail – und erhalte aufgeräumtes Markdown, das du in eine README, ein Wiki oder eine statische Seite einfügen kannst.
- Markdown zu HTML — Schreib oder füg Markdown ein und erhalte sofort sauberes HTML, mit bereinigter Live-Vorschau, GitHub-Tabellen, Task-Listen und Code-Blöcken mit Sprachangabe.
Häufige Fragen
Wird mein HTML irgendwo hochgeladen?
Verändert das Formatieren das Aussehen meiner Seite?
display:inline-block stützen. Der Inhalt von <pre> und <textarea> wird nie verändert.Was ist der Unterschied zwischen Formatieren und Validieren von HTML?
Formatiert das Tool auch CSS und JavaScript im HTML?
<style>- und <script>-Tags wird mit denselben Einrückungseinstellungen formatiert. JSON- und Template-Script-Typen bleiben unverändert.Wie viel kleiner wird minifiziertes HTML?
Kann ich Vue-, Angular- oder Svelte-Templates formatieren?
v-if, @click oder [prop]. Single-File-Komponenten mit <script setup> und TypeScript werden als HTML plus Script formatiert.