Zum Inhalt springen
Kostenloses Tool

HTML Formatter online: HTML & CSS Code verschönern

Der HTML Formatter, auch HTML Beautifier genannt, macht aus minifiziertem oder unordentlichem HTML und CSS eingerückten, lesbaren Code: Aus der Einzeile body{margin:0;font-family:Arial,sans-serif}… werden z. B. sauber eingerückte CSS-Regeln, wahlweise mit 2 oder 4 Leerzeichen oder Tab. Die Sprache wird automatisch erkannt. Kostenlos, ohne Anmeldung, dein Code bleibt in deinem Browser.

Gebaut von Luca Stanek

Code fertig? Bring deine Website mit schnellem, zuverlässigem Webhosting online.

Website online bringen

Formatierter Code

Der formatierte Code erscheint hier, sobald du links etwas einfügst.

Füge links deinen Code ein oder lade ein Beispiel. Das Ergebnis erscheint sofort.

Dein Code bleibt in deinem Browser: Er wird weder hochgeladen noch gespeichert.

Beispiel-Ergebnis

Was dieser HTML & CSS Formatter aus deinem Code macht

Code, wie er aus einem Minifier oder einem Editor kommt, und das Ergebnis mit 2 Leerzeichen Einrückung.

HTML

Eingabe:

<nav class="navbar"><ul><li><a href="/">Start</a></li><li class="active"><a href="/tools">Tools</a></li></ul></nav><main><h1>Willkommen</h1><p>Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>, der sich nicht um   Leerzeichen schert.</p><img src="logo.png" alt="Logo"></main>

Ergebnis:

<nav class="navbar">
  <ul>
    <li><a href="/">Start</a></li>
    <li class="active"><a href="/tools">Tools</a></li>
  </ul>
</nav>
<main>
  <h1>Willkommen</h1>
  <p>
    Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>,
    der sich nicht um Leerzeichen schert.
  </p>
  <img src="logo.png" alt="Logo">
</main>

CSS

Eingabe:

body{margin:0;font-family:Arial,sans-serif}.btn,.link{color:#fff;background:#0a84ff;padding:8px 16px}.btn:hover{opacity:.8}@media (max-width:600px){.btn{display:block}}

Ergebnis:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.btn,
.link {
  color: #fff;
  background: #0a84ff;
  padding: 8px 16px;
}

.btn:hover {
  opacity: .8;
}

@media (max-width: 600px) {
  .btn {
    display: block;
  }
}

Überblick

Was ist ein HTML Formatter?

Ein HTML Formatter, auch HTML Beautifier genannt, bringt HTML- und CSS-Code in ein lesbares Layout: eine Struktur pro Zeile, einheitlich eingerückt. Dieser Formatter erkennt die Sprache automatisch, rückt mit 2 oder 4 Leerzeichen oder Tab ein, öffnet Dateien bis 2 MB und ändert bis auf ein fehlendes letztes CSS-Semikolon nur Leerzeichen und Zeilenumbrüche. Er läuft kostenlos in deinem Browser, ohne Upload.

HTML formatieren

Block-Elemente stehen auf eigenen Zeilen und sind eingerückt, Fließtext bricht bei 100 Zeichen um. Lange Tags bekommen auf Wunsch ein Attribut pro Zeile.

CSS formatieren und verschönern

Selektoren, Deklarationen und Klammern stehen auf eigenen Zeilen, auch innerhalb von @media. Lange Wertelisten wie transition werden auf mehrere Zeilen verteilt.

Sprache automatisch erkannt

Tags sprechen für HTML, geschweifte Klammern, @-Regeln oder Eigenschaften mit Doppelpunkt für CSS. Du kannst HTML oder CSS auch fest einstellen.

Warnungen mit Zeile und Spalte

Nicht geschlossene Tags und Klammern meldet das Tool mit Zeile und Spalte, ein Klick markiert die Stelle in der Eingabe. Ein Validator ist es nicht.

Ergebnis mit Syntax-Hervorhebung

Dazu siehst du die Zahl der Zeilen sowie der Elemente bzw. Regeln und Deklarationen. Ergebnisse über 150.000 Zeichen erscheinen ohne Farben.

Im Browser, ohne Upload

Dein Code wird weder hochgeladen noch gespeichert. Du öffnest Dateien bis 2 MB und kopierst das Ergebnis oder lädst es herunter.

So funktioniert es

So formatierst du HTML und CSS online

Fünf Schritte, ohne Anmeldung und ohne Installation.

Schritt 1

Code einfügen

Füge HTML oder CSS ins linke Feld ein, öffne eine Datei (.html, .htm, .xhtml, .css oder .txt, bis 2 MB) oder lade das HTML- bzw. CSS-Beispiel.

Schritt 2

Sprache prüfen

Lass die Sprache auf Automatisch oder stelle HTML bzw. CSS fest ein. Die erkannte Sprache steht unter dem Ergebnis.

Schritt 3

Einrückung wählen

Rücke mit 2 Leerzeichen, 4 Leerzeichen oder Tab ein. Bei HTML legst du fest, ob lange Tags ihre Attribute umbrechen oder in einer Zeile bleiben.

Schritt 4

Hinweise prüfen

Warnungen und Fehler nennen Zeile und Spalte. Ein Klick auf den Link daneben markiert die Stelle in deiner Eingabe.

Schritt 5

Ergebnis übernehmen

Kopiere den formatierten Code oder lade ihn als formatted.html bzw. formatted.css herunter.

Regeln

So formatiert der HTML & CSS Formatter

Block-Elemente

div, ul, table und Co. stehen auf eigenen Zeilen, Inhalte sind eingerückt. Kurze Elemente wie ein Absatz bleiben in einer Zeile.

Fließtext

Mehrfache Leerzeichen werden zu einem, lange Absätze brechen bei 100 Zeichen um. Das Leerzeichen zwischen Inline-Tags bleibt erhalten.

Lange Tags

Passt ein Tag nicht in eine Zeile, steht jedes Attribut auf einer eigenen Zeile. Das lässt sich ausschalten.

Unverändert

Der Inhalt von pre und textarea, Kommentare, Attributwerte und Texte bleiben, wie sie sind. style wird als CSS formatiert, script höchstens neu eingerückt.

CSS: Selektoren, Deklarationen und Klammern stehen auf eigenen Zeilen, ein fehlendes letztes Semikolon wird ergänzt. Grenzen: Der Code wird nicht validiert, JavaScript wird nicht umformatiert, SCSS und Less werden nicht unterstützt.

Mehr entdecken

Weitere Tools

Text vergleichen online (Diff Checker)

Texte vergleichen online: Zwei Texte, Configs oder Code-Stände vergleichen, Unterschiede zeilen- und wortgenau sehen und als Unified Diff kopieren. Läuft komplett im Browser.

Gebaut von Dimitri Heissler

JSON Formatter

JSON formatieren, minifizieren und validieren - mit Syntax-Highlighting, Fehleranzeige und Download, komplett im Browser.

Gebaut von Jakub Martyniak

XML Formatter & Validator

XML validieren, formatieren, minimieren und automatisch reparieren (unmaskierte Zeichen, fehlende Tags, fehlende Deklaration) — 100 % im Browser, ohne Upload.

Gebaut von Justin Schuessler

Regex Tester

Reguläre Ausdrücke live gegen die native JavaScript-Engine testen - mit Treffer-Hervorhebung, Capture-Groups und Ersetzen-Modus, komplett im Browser.

Gebaut von Jakub Martyniak

URL Encoder & Decoder

URLs und Text online kodieren und dekodieren: encodeURIComponent, encodeURI und Formular-Format im Vergleich, mit Query-Parameter-Tabelle und UTM-Link-Builder. Läuft komplett im Browser.

Gebaut von Dimitri Heissler

.htaccess Generator & htpasswd Generator

Apache-.htaccess und .htpasswd online erstellen: 301-Weiterleitungen, HTTPS, Passwortschutz mit bcrypt, WordPress-Regeln, Fehlerseiten, Caching, GZIP und Hotlink-Schutz. Läuft komplett im Browser.

Gebaut von Dimitri Heissler

Markdown Editor

Markdown online schreiben mit Live-Vorschau: README für GitHub und Discord-Nachrichten, Tabellen aus Excel, Export als PDF oder HTML. Komplett im Browser.

Gebaut von Dimitri Heissler

SQL Formatter online (SQL formatieren & verschönern)

SQL online formatieren, verschönern und minimieren – für MySQL, MariaDB und PostgreSQL mit Einrückung und Schreibweise der Schlüsselwörter. Läuft komplett im Browser, ohne Upload.

Gebaut von Luca Stanek

Color Picker

Farben live zwischen HEX, RGB, HSL, HSV und CMYK umrechnen, den nächsten CSS-Named-Color-Treffer finden und den WCAG-Kontrast gegen Schwarz/Weiß prüfen - komplett im Browser.

Gebaut von Justin Schuessler

FAQ

Häufig gestellte Fragen

Kurze Antworten rund um HTML und CSS formatieren mit diesem Tool.

Ein HTML Formatter, auch Beautifier genannt, bringt Code in ein lesbares Layout: eine Struktur pro Zeile, einheitlich eingerückt. Praktisch für minifizierten Code, Quelltext aus dem Browser oder Code aus einem Editor ohne Format-Funktion. Dieser Formatter verarbeitet HTML und CSS.

Füge den Code links ein, das Ergebnis erscheint sofort rechts. Wähle die Einrückung mit 2 Leerzeichen, 4 Leerzeichen oder Tab und lege fest, ob lange Tags ihre Attribute umbrechen. Dann kopierst du das Ergebnis oder lädst es als formatted.html herunter.

Füge das CSS ein: Das Tool erkennt es an geschweiften Klammern, @-Regeln oder Eigenschaften mit Doppelpunkt, du kannst CSS aber auch fest einstellen. Jede Regel bekommt eigene Zeilen für Selektor, Deklarationen und Klammern, auch innerhalb von @media. Lange Wertelisten wie transition werden auf mehrere Zeilen verteilt, ein fehlendes letztes Semikolon wird ergänzt. Der Download heißt formatted.css.

Nein. Es ändern sich nur Leerzeichen und Zeilenumbrüche. Tags, Attribute, Werte, Texte und Kommentare bleiben. Einzige Ausnahme: In CSS wird ein fehlendes Semikolon nach der letzten Deklaration ergänzt.

Der Formatter ändert nur Leerzeichen, Einrückung und Zeilenumbrüche im Quelltext, damit du den Code besser lesen kannst. Text gestaltest du in HTML mit Tags wie strong, em oder br. Solche Tags fügt das Tool weder hinzu noch ändert es sie.

Der Inhalt von pre und textarea bleibt unverändert, weil dort jedes Leerzeichen zählt. In style wird das CSS formatiert, script wird höchstens neu eingerückt, aber nicht umformatiert.

Nein, er validiert nicht und minifiziert nicht. Er formatiert nur HTML und CSS: JavaScript in script wird nicht umformatiert, SCSS und Less werden nicht unterstützt. Er warnt aber vor nicht geschlossenen Tags, schließenden Tags ohne öffnendes Tag und geschweiften Klammern ohne Gegenstück, jeweils mit Zeile und Spalte. Bei einem nicht beendeten Kommentar, Text in Anführungszeichen oder Tag erscheint statt des Ergebnisses eine Fehlermeldung.

Nein. Alles läuft in deinem Browser, es gibt keinen Upload und keine Speicherung. Du kannst Dateien bis 2 MB öffnen: .html, .htm, .xhtml, .css oder .txt.

Noch weitere Fragen?

Support kontaktieren
Baust du gerade eine Website?

Deine Website braucht zuverlässiges Hosting

Ein ZAP-Hosting vServer bringt deine Seite zuverlässig online.

4,4/5 Trustpilot32.000+ Aktive ServerSeit 2010
Hosting ansehen

Kein Setup. Kein Risiko. In Sekunden online.

Flexible LaufzeitJederzeit kündbarIn 60 Sekunden online

Auf der Suche nach weiteren Tools? Alle Entwickler-Tools ansehen