Kostenloser HTML Beautifier
Dieser kostenlose HTML Beautifier nimmt minifiziertes oder ungeordnetes Markup und gibt es mit einem Block-Tag pro Zeile und konsistenter Einrückung zurück, damit du sehen kannst, wie Elemente verschachtelt sind. Inline-Tags bleiben bei ihrem Text, kurze Elemente bleiben auf einer Zeile, und der Inhalt von pre-, textarea-, script- und style-Blöcken bleibt genau wie geschrieben. Es eignet sich für Entwickler und Marketer, die Seitenquellcode lesen oder bearbeiten müssen.
HTML Beautifier
Generators and Converters
Über dieses Tool
Seiten werden oft als eine lange Zeile oder als Markup geliefert, das von mehreren verschiedenen Tools und Personen eingerückt wurde. Das zu lesen ist langsam und Fehler verstecken sich leicht: ein nicht geschlossenes div, ein verwaistes Tag oder eine Überschrift an der falschen Stelle. Das Einrücken jeder Ebene macht die Verschachtelung auf einen Blick sichtbar.
Der Beautifier teilt das Markup in Tags, Kommentare und Text auf und rückt dann nach der Tiefe jedes Block-Elements ein. Inline-Tags wie a, strong, em und span bleiben in ihrem Absatz, und void-Elemente wie br, img, input und meta erhöhen die Tiefe nicht. Du kannst zwei Leerzeichen, vier Leerzeichen oder Tabulatoren wählen. Der Text in pre und textarea und der Code in script und style werden nie neu formatiert, da zusätzliche Leerzeichen dort ändern können, was die Seite anzeigt oder tut.
Es formatiert das, was du eingibst, und repariert kein fehlerhaftes HTML, daher wird ein nicht geschlossenes Tag als eine Einrückung angezeigt, die nie zurückkommt. Verwende es vor dem Bearbeiten einer Vorlage, beim Vergleich zweier Versionen einer Seite oder beim Überprüfen des HTML, das ein Plugin erzeugt hat. Nichts, das du einfügst, wird gespeichert.
Häufig gestellte Fragen
Ändert das Formatieren das Aussehen der Seite?
Das sollte nicht der Fall sein. Das Tool fügt nur Zeilenumbrüche und Einrückungen zwischen Block-Tags hinzu, und der Inhalt in pre, textarea, script und style bleibt unverändert. Browser reduzieren Leerzeichen zwischen den meisten Elementen, daher vergleiche die Seite vorher und nachher, wenn exakte Abstände für dich wichtig sind.
Kann es ungültiges HTML reparieren?
Nein. Es formatiert die Tags, die es findet, und fügt keine fehlenden schließenden Tags hinzu oder ordnet Elemente neu an. Fehlerhafte Verschachtelung zeigt sich normalerweise als Einrückung, die nicht nach links zurückkommt, was dir hilft, das Problem zu finden, aber du musst das Markup selbst korrigieren.
Was ist der Unterschied zwischen Formatieren und Minifizieren?
Sie sind Gegensätze. Ein Beautifier fügt Zeilenumbrüche und Einrückungen hinzu, damit Menschen den Code lesen können. Ein Minifier entfernt sie, damit die Datei kleiner zum Herunterladen ist. Behalte die formatierte Version während der Arbeit und veröffentliche eine minifizierte Kopie.
Welche Einrückung sollte ich wählen?
Verwende, was dein Projekt bereits verwendet. Zwei Leerzeichen halten tiefes Markup schmal, vier Leerzeichen sind in vielen Stilrichtlinien üblich, und Tabulatoren lassen jede Person ihre eigene Breite in ihrem Editor einstellen. Die Wahl ändert nicht, wie die Seite funktioniert.