HTML-Formatter Online

HTML-Formatter zum Verschönern oder Minifizieren von Markup und Formatieren von Inline-CSS und -JS mit Prettier.

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

Entwickelt und gepflegt von Udit Agarwal

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

  1. Füge dein HTML in das Eingabefeld ein.
  2. Wähle Verschönern zum Formatieren, Minifizieren zum Komprimieren oder Vorschau zum Rendern.
  3. Schalte Tabs ein oder aus, um deinen Einrückungsstil festzulegen.
  4. 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.

Verwandte Tools

  • CSS-/SCSS-Formatierer — Verschönere oder minimiere CSS/SCSS/LESS, sortiere Eigenschaften und entferne Duplikate.
  • JS-/TS-Formatierer — Verschönere JavaScript, TypeScript und JSX/TSX mit Prettier-Optionen oder minimiere reines JavaScript.
  • XML-Formatierer — Verschönere, minimiere und validiere XML und konvertiere XML ↔ JSON.
  • HTML escapen / entescapen — Escape und entescape HTML-Sonderzeichen und -Entitäten.
  • Markdown-Vorschau — Rendere Markdown zu HTML mit Live-Vorschau.
  • SVG-Optimierer — Minimiere SVG: entferne Kommentare, Metadaten und Editor-Reste und reduziere Leerzeichen.
  • JSON-Formatierer — JSON verschönern, minimieren und validieren – mit Fehlerposition.
  • SQL-Formatierer — Formatiere SQL für MySQL, PostgreSQL, SQL Server, SQLite, BigQuery und Oracle.

Weitere Code-Formatierer-Tools

  • XML-Formatierer — Verschönere, minimiere und validiere XML und konvertiere XML ↔ JSON.
  • SQL-Formatierer — Formatiere SQL für MySQL, PostgreSQL, SQL Server, SQLite, BigQuery und Oracle.
  • GraphQL-Formatierer — Formatiere oder minimiere GraphQL-Abfragen und -Schemas, validiere die Syntax und extrahiere Operationen.
  • Dockerfile-Formatierer — Formatiere ein Dockerfile und erhalte Best-Practice- und Lint-Hinweise.
  • MongoDB-Query-Formatierer — Formatiere MongoDB-Shell-Abfragen und Aggregations-Pipelines.
  • Kontrast-Checker — Prüfe das WCAG-Kontrastverhältnis und ob AA/AAA zwischen zwei Farben bestanden wird.
  • Mermaid-Diagramm-Renderer — Rendere Mermaid-Diagramme (Fluss, Sequenz, Gantt) als SVG in deinem Browser.
  • SVG-Optimierer — Minimiere SVG: entferne Kommentare, Metadaten und Editor-Reste und reduziere Leerzeichen.
  • MongoDB-Query-Beautifier — Verschönere und rücke MongoDB-Abfragen und find()-Anweisungen in deinem Browser ein.
  • MongoDB-Aggregation-Beautifier — Verschönere und rücke MongoDB-Aggregation-Pipelines in deinem Browser ein.
  • MongoDB-Explorer — Erkunde ein MongoDB-Dokument- oder Sammlungs-Beispiel und leite Feldschema und Typen ab.
  • OpenAPI-/Swagger-Formatierer — Formatiere und validiere OpenAPI-/Swagger-Spezifikationen (JSON oder YAML) und zähle Pfade und Operationen.

Alle Code-Formatierer-Tools ansehen (32) · Alle Tools