Warum sollten die Tags , , und nicht neu formatiert werden?

In den Elementen , und werden Leerzeichen und Zeilenumbrüche vom Browser buchstäblich gerendert, sodass eine Änderung der Einrückung die angezeigte Ausgabe beeinträchtigt. Ebenso kann das Teilen von Zeilen innerhalb von - oder -Tags mit einem HTML-Parser JavaScript-Zeichenfolgenliterale oder CSS-Selektoren beschädigen. Durch die Aktivierung von Keep , , Unformatted werden diese Blöcke wörtlich beibehalten.

HTML Beautifier & Formatierer online

Q: Was ist der Unterschied zwischen HTML-Verschönerung und HTML-Minimierung?

HTML beautifying (pretty-printing) fügt strukturierte Zeilenumbrüche und hierarchische Einrückungen hinzu, damit Entwickler Markups einfach lesen, debuggen und verwalten können. Durch die Minimierung durch HTML werden unnötige Leerzeichen, Zeilenumbrüche und Kommentare entfernt, um die Dateigröße zu reduzieren und das Laden von Produktionsseiten zu beschleunigen.

Q: Wie geht der HTML Beautifier mit den leeren (selbstschließenden) Elementen des Typs HTML5 um?

HTML5 definiert 14 leere Elemente (area, base, br, col, embed, hr, img, input, link, meta, param, source, track und wbr), die niemals schließende Tags haben. Dieser Formatierer erkennt automatisch alle 14 void-Elemente sowie -Deklarationen und XML/SGML-Anweisungen, sodass nachfolgende Geschwister-Tags niemals in tiefere Einrückungsebenen verschoben werden.

Formatieren, einrücken und bereinigen Sie unordentlichen oder minified HTML5-Code in Echtzeit. Behandelt ungültige HTML5-Tags, inline-Elemente und das Attribut wrapping ordnungsgemäß und behält die Blöcke

Geben Sie den HTML-Code ein

Quick Presets:

Zeichen: 0

Zeilen: 0

Größe: 0 B

Formatierte HTML-Ausgabe

Einrückungsoptionen

Einzugsgröße (Leerzeichen):

Verwenden Sie Tabulatoren statt Leerzeichen Indent nested HTML elements using tab characters (\t)

Tag- und Zeilenumbruch

Halten Sie kurze Inline-Tags in einer Zeile Keep inline tags like <strong>, <a>, <span>, and <code> together with surrounding text

Lassen Sie

Preserve exact whitespace and line breaks inside raw text and code blocks

Tag-Attribute in neue Zeilen umbrechen Place each HTML attribute on its own indented line when a tag has 2+ attributes

Textinhalt umbrechen bei:

Bereinigungsoptionen

Entfernen Sie HTML-Kommentare Strip  comments from the formatted output

Entfernen Sie alle leeren Zeilen Strip blank lines between formatted HTML elements

Max. leere Zeilen, die beibehalten werden sollen:

Was ist ein Online-HTML Beautifier & Formatter?

Ein HTML Beautifier (auch bekannt als HTML-Formatierer oder pretty-Drucker) nimmt komprimierten, minified oder inkonsistent eingerückten HTML-Quellcode und strukturiert ihn in eine saubere, für Menschen lesbare DOM-Hierarchie um. Unabhängig davon, ob Sie minified-Produktionsvorlagen überprüfen, CMS-Exporte bereinigen oder Code vor der Übergabe an Git standardisieren, können Sie durch die richtige Einrückung mühelos nicht geschlossene Tags und tief verschachtelte Container erkennen.

Im Gegensatz zu naiven Formatierern für reguläre Ausdrücke, die jede spitze Klammer in eine neue Zeile aufteilen und

- oder

So verschönern oder verkleinern Sie HTML-Code online

Fügen Sie Ihr HTML-Markup ein: Fügen Sie Ihren unformatierten oder minified HTML-Code in das Feld Input HTML Code ein oder klicken Sie auf Load Sample HTML, um den Formatierer mit einer vollständigen HTML5-Vorlage zu testen.
Wählen Sie Ihre Formatierungseinstellungen: Verwenden Sie die Schnellvoreinstellungen-Leiste oder die rechte Einstellungsspalte, um Einrückungen (2, 4 oder 8 Leerzeichen oder Tabulatoren), Attribut-wrapping, inline-Tag-Gruppierung und Kommentarentfernung zu konfigurieren.
Kopieren, herunterladen oder minimieren: Ihr formatiertes HTML wird während der Eingabe automatisch aktualisiert. Klicken Sie auf In clipboard kopieren, .html herunterladen, um die Datei lokal zu speichern, oder HTML minimieren, um das Markup in eine einzelne Zeile zu komprimieren.

Vorher vs. Nachher HTML Formatierungsvergleich

Formatierungsmodus	Beispiel einer HTML-Ausgabe	Bester Anwendungsfall
Minimiertes HTML	`Hallo Welt`	Produktionsbereitstellung, Reduzierung der HTTP-Nutzlastgröße und E-Mail-HTML-Vorlagen.
Standard Verschönert (4 Felder)	`Hallo Welt`	Tägliche Webentwicklung, Debuggen von DOM-Verschachtelungen und Codeüberprüfungen.
Wrapped Attributes Mode	`class="card" id="hero">`	Komponenten mit vielen Tailwind CSS-Dienstprogrammklassen, `data-*`-Attributen oder ARIA-Requisiten.

HTML5 Void-Elemente und Inline- vs. Block-Tag-Formatierung

HTML5 Hohlraumelemente erhöhen nie die Verschachtelungstiefe: , , , , , , , , und ) erfordern keine schließenden Tags oder abschließenden Schrägstriche. Unser Formatierer verfolgt diese automatisch, sodass gleichgeordnete Elemente ausgerichtet bleiben.
Inline vs. Blockelemente: Das Aufteilen von inline-Elementen wie Lesen Sie noch heute unsere Dokumentation. in fünf separate Zeilen macht Prosa schwer lesbar und kann zu unerwünschten Leerzeichen zwischen Wörtern im Browser führen. Wenn Keep Short Inline Tags on One Line aktiviert bleibt, bleibt der natürliche Satzfluss erhalten.
Beibehalten von Rohblöcken: Leerzeichen in den Tags , und </code> werden von Browsern wörtlich gerendert. Wenn Sie die Option <em>Unformatted</em> aktiviert lassen, wird garantiert, dass Ihre Codeausschnitte, ASCII-Diagramme und eingebetteten <code><script></code>- oder <code><style></code>-Blöcke niemals geändert werden.

Häufig gestellte Fragen (FAQ)

Was ist der Unterschied zwischen HTML-Verschönerung und HTML-Minimierung?

HTML beautifying (pretty-printing) fügt strukturierte Zeilenumbrüche und hierarchische Einrückungen hinzu, sodass Entwickler Markups einfach lesen, debuggen und verwalten können. HTML minifying entfernt unnötige Leerzeichen, Zeilenumbrüche und Kommentare, um die Dateigröße zu reduzieren und das Laden von Produktionsseiten zu beschleunigen.

Warum sollten die Tags

, ,

In den Elementen

 und </code> werden Leerzeichen und Zeilenumbrüche vom Browser wörtlich gerendert, sodass eine Änderung der Einrückung die angezeigte Ausgabe beeinträchtigt. Ebenso kann das Teilen von Zeilen innerhalb der Tags <code><script></code> oder <code><style></code> mit einem HTML-Parser JavaScript-Zeichenfolgenliterale oder CSS-Selektoren beschädigen. Durch die Aktivierung von <strong>Keep <pre>, <script>, <style> Unformatted</strong> bleiben diese Blöcke wörtlich erhalten.

Wie geht der HTML Beautifier mit den leeren (selbstschließenden) Elementen des Typs HTML5 um?

HTML5 definiert 14 Hohlraumelemente (area, base, br, col, embed, hr, img, input, link, meta, param, source, track und wbr), die niemals schließende Tags haben. Dieser Formatierer erkennt automatisch alle 14 ungültigen Elemente sowie -Deklarationen und XML/SGML-Anweisungen, sodass nachfolgende Geschwister-Tags niemals in tiefere Einrückungsebenen verschoben werden.

Sollte ich 2 Leerzeichen, 4 Leerzeichen oder Tabulatoren für die HTML-Einrückung verwenden?

Sowohl 2-Felder als auch 4-Felder werden häufig verwendet. Googles HTML/CSS Style Guide und moderne Frontend-Toolchains (Prettier, Vue, React) verwenden standardmäßig 2-Leerzeichen, da HTML-Dokumente häufig eine tiefe DOM-Verschachtelung aufweisen. WordPress und viele Backend-Template-Engines bevorzugen tabs oder 4 Leerzeichen. Über die Schnellvoreinstellungsleiste können Sie sofort zwischen ihnen wechseln.

Wird mein HTML-Code auf einen Server hochgeladen?

Nein. Das gesamte Parsen, Formatieren und Minimieren von HTML erfolgt zu 100 % lokal in Ihrem Browser mit JavaScript. Ihr Quellcode und Ihre Vorlagen verlassen niemals Ihr Gerät.