Was ist der HTML-Formatter?

Der HTML-Formatter ist ein Tool im Browser, das HTML-Markup mit Prettier verschönert oder minifiziert, Inline-CSS und -JavaScript formatiert und das Ergebnis in einem Sandbox-iframe vorschaut.

Wie verschönere ich minifiziertes HTML?

Füge dein minifiziertes HTML in das Eingabefeld ein und wähle Verschönern. Der HTML-Formatter rückt das Markup neu ein und formatiert alle Inline- - und - -Blöcke für die Lesbarkeit neu.

Formatiert der HTML-Formatter Inline-CSS und -JavaScript?

Ja. Prettier formatiert - und -Blöcke automatisch als Teil des Verschönerns der Seite.

Kann ich HTML auch minifizieren und nicht nur verschönern?

Ja. Wechsle in den Minify-Modus, um Leerraum zu entfernen und das kleinste äquivalente Markup für die Produktion zu erzeugen.

Kann ich Tabs statt Leerzeichen wählen?

Ja. Schalte die Tabs-Option im HTML-Formatter um, um mit Tabs einzurücken, oder lasse sie aus, um Leerzeichen zu verwenden.

Wird mein HTML irgendwohin hochgeladen, wenn ich es formatiere?

Nein. Alle Formatierungen und Vorschau-Renderings finden lokal in deinem Browser statt, sodass dein Markup dein Gerät nie verlässt.

HTML-Formatierer

Verschönere oder minimiere HTML, formatiere eingebettetes CSS/JS und zeige eine Vorschau.

Dein HTML wird vollständig in deinem Browser verschönert, minifiziert und vorgeschaut — nichts wird auf einen Server hochgeladen.

Räumst du auch Stylesheets auf? Probiere den CSS Formatter.

Über HTML-Formatierer

Dieser HTML-Formatter verschönert oder minifiziert rohes Markup und formatiert jedes Inline-CSS und -JavaScript automatisch mit Prettier. Füge unordentliche Template-Ausgaben, gescrapte Seiten oder handgeschriebenes Markup ein und erhalte in einem Schritt sauberes, konsistent eingerücktes HTML, oder wechsle in den Minify-Modus, um Leerraum zu entfernen und das Dokument für die Produktion zu verkleinern. Eine Sandbox-Vorschau lässt dich das Markup mit deaktiviertem Scripting sicher rendern, sodass eingebettete Skripte nie ausgeführt werden. Als HTML-Beautifier und -Prettifier ist er für Frontend-Entwickler, QA-Ingenieure und alle gebaut, die HTML online formatieren müssen, ohne den Kontext zu wechseln. Alles läuft lokal in deinem Browser, sodass deine Daten dein Gerät nie verlassen. Wähle Tabs oder Leerzeichen für die Einrückung, um deinem Projektstil zu entsprechen.

Funktionen

Verschönere HTML mit konsistenter, lesbarer Einrückung
Minifiziere HTML, um Leerraum zu entfernen und die Ausgabe zu verkleinern
Formatiere Inline-<style>- und -<script>-Blöcke über Prettier
Sandbox-Vorschau rendert Markup mit deaktiviertem Scripting
Schalte zwischen Tabs und Leerzeichen für die Einrückung um
Verarbeitet vollständige Seiten oder partielle Markup-Snippets
Kopiere formatierte oder minifizierte Ausgabe mit einem Klick
Läuft vollständig in deinem Browser

So verwendest du HTML-Formatierer

Füge dein HTML in das Eingabefeld ein.
Wähle Verschönern zum Formatieren, Minifizieren zum Komprimieren oder Vorschau zum Rendern.
Schalte Tabs ein oder aus, um deinen Einrückungsstil festzulegen.
Kopiere das formatierte oder minifizierte HTML aus dem Ausgabebereich.

Beispiel

Eingabe

<div   class="card"><h1>Hallo</h1><p>Hallo   Welt</p></div>

Ausgabe

<div class="card">
  <h1>Hallo</h1>
  <p>Hallo Welt</p>
</div>

Der Verschönern-Modus rückt Markup neu ein und normalisiert Leerraum.

Häufige Fehler & Fehlerbehebung

Eingebettete Skripte laufen nicht in der Vorschau. — Das ist beabsichtigt — die Vorschau ist ein Sandbox-iframe mit deaktiviertem Scripting, damit Seiten sicher rendern. Teste interaktiven Code in deiner eigenen Umgebung.
Inline-CSS oder -JS wird nicht neu formatiert. — Stelle sicher, dass der Code in ordnungsgemäßen <style>- oder <script>-Tags steht; Prettier formatiert beim Verschönern nur erkannte Inline-Blöcke.
Fehlerhafte oder nicht geschlossene Tags erzeugen unerwartete Einrückung. — Schließe nicht übereinstimmende Tags in deiner Quelle — der Formatter fließt gültige Struktur um, kann die beabsichtigte Verschachtelung aber nicht erraten.
Die minifizierte Ausgabe ist schwer zu lesen. — Wechsle zurück in den Verschönern-Modus; Minifizieren ist für die Produktionsgröße gedacht, nicht für die Lesbarkeit.

Häufig gestellte Fragen

Was ist der HTML-Formatter?: Der HTML-Formatter ist ein Tool im Browser, das HTML-Markup mit Prettier verschönert oder minifiziert, Inline-CSS und -JavaScript formatiert und das Ergebnis in einem Sandbox-iframe vorschaut.
Wie verschönere ich minifiziertes HTML?: Füge dein minifiziertes HTML in das Eingabefeld ein und wähle Verschönern. Der HTML-Formatter rückt das Markup neu ein und formatiert alle Inline-<style>- und -<script>-Blöcke für die Lesbarkeit neu.
Formatiert der HTML-Formatter Inline-CSS und -JavaScript?: Ja. Prettier formatiert <style>- und <script>-Blöcke automatisch als Teil des Verschönerns der Seite.
Kann ich HTML auch minifizieren und nicht nur verschönern?: Ja. Wechsle in den Minify-Modus, um Leerraum zu entfernen und das kleinste äquivalente Markup für die Produktion zu erzeugen.
Kann ich Tabs statt Leerzeichen wählen?: Ja. Schalte die Tabs-Option im HTML-Formatter um, um mit Tabs einzurücken, oder lasse sie aus, um Leerzeichen zu verwenden.
Wird mein HTML irgendwohin hochgeladen, wenn ich es formatiere?: Nein. Alle Formatierungen und Vorschau-Renderings finden lokal in deinem Browser statt, sodass dein Markup dein Gerät nie verlässt.