HTML formatieren und minimieren
HTML Beautifier & Minifier
Formatiert oder minimiert HTML, bewahrt Inline-Elemente und fasst auf Wunsch Leerraum zusammen.
Rückt HTML neu ein, damit eine Seite, die Ihnen übergeben wurde, lesbar ist, oder minimiert es, wenn die Bytes zählen. Der Tokenizer implementiert die WHATWG-Zustände für Rohtext und RCDATA, was verhindert, dass ein `</div>` in einem Script-String als Tag gelesen wird und alles danach zerstört.
HTML-Eingabe
.html-Datei hier ablegen
Wird nur in diesem Tab gelesen. Nichts wird hochgeladen.
Formatiertes HTML
Elemente
20
Textknoten
13
Kommentare
1
Maximale Tiefe
5
Wie weit es geht
- · Ein von Hand geschriebener Tokenizer liest
<script>und<style>als reinen Text und<textarea>und<title>als RCDATA, damit ein</div>in einer Zeichenkette nicht für ein Tag gehalten wird. - · Innerhalb von
<pre>und<textarea>wird kein einziges Zeichen geändert;<script>und<style>werden nur zeilenweise neu eingerückt. Der Code darin wird nicht umgeschrieben. - · Leere Elemente wie
<br>,<img>und die Elemente, deren End-Tag entfallen darf —<li>,<p>,<td>— werden so behandelt, wie es die Spezifikation sagt. Fehlende End-Tags werden nicht für Sie ergänzt. - · Die Minifizierung entfernt nur Kommentare, Leerraum und überflüssige Anführungszeichen. Sie lässt keine optionalen End-Tags weg und ordnet keine Attribute um.
- · Nicht zusammenpassende Tags und doppelte Attribute werden mit Zeile und Spalte gemeldet, und das Dokument wird trotzdem so weit gelesen, wie es geht — genau wie in einem Browser.
Das CSS darin lässt sich getrennt aufräumen mit CSS formatieren und minimieren, und die Skripte mit JavaScript formatieren und minimieren.
So funktioniert es
Fügen Sie eine Seite oder ein Fragment ein
Ein ganzes Dokument mit Doctype oder ein Teilstück, das Sie aus einem Template kopiert haben. Beides funktioniert; ein Fragment hat nur kein `html`-Element, in dem eingerückt wird.
Legen Sie das Layout fest
Einrückungsbreite, ob Attribute auf doppelte Anführungszeichen normalisiert werden, die Zeilenbreite, ab der eine lange Attributliste umbricht, und ob der Inhalt von `html`, `head` und `body` eingerückt wird – viele handgeschriebene Seiten lassen die bündig.
Lesen Sie die Problemliste
Nicht zusammenpassende Tags und doppelte Attribute werden mit Zeile und Spalte aufgeführt. Das Dokument wird trotzdem formatiert – der Browser würde es auch rendern –, aber jeder Eintrag ist etwas, das sich zu beheben lohnt.
Oder minimieren Sie für die Leitung
Kommentare, Whitespace und unnötige Attribut-Anführungszeichen fliegen heraus. Bedingte Kommentare und `<!--!`-Kommentare bleiben erhalten, und die Zahlen vorher/nachher zeigen, was es gebracht hat.
Häufige Fragen
Ist mein `<pre>`-Block sicher?
Ja. Nichts innerhalb von `<pre>` oder `<textarea>` wird um ein einziges Zeichen verändert, in keinem der beiden Modi – Whitespace dort ist Inhalt. `<script>` und `<style>` werden zeilenweise neu eingerückt, ihr Inhalt wird aber nie umgeschrieben.
Fügt es die schließenden Tags hinzu, die ich weggelassen habe?
Nein. Es versteht sie – `<li>`, `<p>` und `<td>` schließen implizit, und leere Elemente wie `<br>` und `<img>` hatten nie ein schließendes Tag –, sodass der Baum korrekt gebaut wird. Aber Tags zu schreiben, die Sie nicht geschrieben haben, ist eine Bearbeitung, kein Formatieren.
Kann es eine Template-Datei formatieren – Jinja, ERB, Handlebars?
Nur so weit, wie die Template-Syntax zufällig wie Text aussieht. `{% if %}`-Blöcke werden nicht als Struktur verstanden, sodass die Einrückung in ihnen überall dort falsch ist, wo ein Tag in einem Zweig öffnet und in einem anderen schließt. Formatieren Sie stattdessen die gerenderte Ausgabe.
Verändert Minimieren das Aussehen der Seite?
Whitespace zwischen Inline-Elementen ist in HTML bedeutungstragend, und ihn zusammenzufassen ist die eine Einstellung hier, die einen Pixel verschieben kann – `<span>a</span> <span>b</span>` ist nicht dasselbe wie die beiden Spans direkt aneinander. Schalten Sie Whitespace zusammenfassen aus, wenn Ihr Layout davon abhängt.
Eingabe aus
HTML in Markdown
HTML to Markdown
Wandelt eingefügtes HTML oder eine gespeicherte Seite in sauberes Markdown um – Überschriften, verschachtelte Listen, GFM-Tabellen, Codeblöcke – und verwirft Skripte und Stile.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
JavaScript formatieren und minimieren
JavaScript Beautifier & Minifier
Entfernt Kommentare und Leerraum aus JavaScript oder TypeScript, ohne etwas umzubenennen, und rückt ein minimiertes Bundle wieder lesbar ein.
XPath-Tester
XPath Tester
Wertet einen XPath- oder CSS-Selektor gegen XML oder HTML aus und listet jeden passenden Knoten auf.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
HTML-Entities kodieren
HTML Entity Encoder
Maskiert und demaskiert HTML-Entities, mit benannter, dezimaler und hexadezimaler Ausgabe.
HTML in Markdown
HTML to Markdown
Wandelt eingefügtes HTML oder eine gespeicherte Seite in sauberes Markdown um – Überschriften, verschachtelte Listen, GFM-Tabellen, Codeblöcke – und verwirft Skripte und Stile.
JavaScript formatieren und minimieren
JavaScript Beautifier & Minifier
Entfernt Kommentare und Leerraum aus JavaScript oder TypeScript, ohne etwas umzubenennen, und rückt ein minimiertes Bundle wieder lesbar ein.
Base64 kodieren und dekodieren
Base64 Encoder & Decoder
Kodiert und dekodiert Base64 und Base64URL für Text oder Dateien und behandelt UTF-8 korrekt.
curl in Code
curl to Code
Wandelt einen curl-Befehl in fetch, axios, Python requests, Go, PHP oder PowerShell um.