HTML formatieren

So funktioniert es

Seitenquelltexte, E-Mail-Vorlagen und Exporte aus Homepage-Baukästen kommen oft als HTML in einer einzigen Zeile oder mit wild durcheinander geratener Einrückung. Fügen Sie den Code in das linke Feld ein; rechts steht danach jedes Block-Tag (div, ul, li, table, p) auf einer eigenen Zeile, pro Verschachtelungsebene eine Stufe eingerückt. So erkennen Sie, welches </div> welches <div> schließt und wo eine Liste endet. CSS in <style> und JavaScript in <script> werden mit derselben Einrückung formatiert. Der Inhalt von <pre> und <textarea> bleibt unberührt, denn dort ist jedes Leerzeichen auf der Seite sichtbar. Inline-Tags wie a, span und strong bleiben in der Zeile ihres Textes. Lange Zeilen werden standardmäßig bei 120 Zeichen umbrochen; wenn Sie das nicht möchten, stellen Sie Lange Zeilen auf So lassen. Die Ergebniszeile nennt, wie viele Zeilen daraus wurden. Mit Was soll passieren? → Minimiert geht es in die Gegenrichtung: Kommentare und Leerraum zwischen Tags fallen weg; den Inhalt von <style> und <script> fasst dieser Modus nicht an.

Dieses Werkzeug ist auch als html formatieren, html formatieren online, html code formatieren, html beautifier, html code einruecken bekannt.

Was ist HTML?

HTML (HyperText Markup Language) ist die Auszeichnungssprache, die einer Webseite ihre Struktur gibt: Überschriften, Absätze, Listen, Tabellen, Links und Bilder werden jeweils mit einem Tag markiert (<h2>, <p>, <ul>, <a>), und Tags stecken ineinander wie die Äste eines Baums. Browser fassen die meisten Leerzeichen und Zeilenumbrüche zwischen Tags zusammen; deshalb kann dieselbe Seite in einer Zeile oder sauber eingerückt geschrieben sein, und die Einrückung zeigt nur Menschen diesen Baum.

Was ist Block- und Inline-Elemente?

Block-Elemente (div, p, ul, table, h1-h6) beginnen auf einer neuen Zeile und nehmen die volle verfügbare Breite ein; Inline-Elemente (a, span, strong, img) stehen im Textfluss. Für das Formatieren ist das entscheidend: Ein Zeilenumbruch zwischen Block-Elementen ändert am Bildschirm nichts, zwischen zwei Inline-Elementen erscheint er dagegen als Leerzeichen. Darum hält ein Formatierer Inline-Elemente in der Zeile ihres Textes.

Was ist der Unterschied zwischen HTML formatieren und minimieren?

Formatieren fügt Einrückung und Zeilenumbrüche hinzu, damit Menschen den Code lesen können; die Datei wird größer, die Seite sieht gleich aus. Minimieren macht das Gegenteil: Es entfernt Kommentare und überflüssigen Leerraum zwischen Tags und kann auch das eingebettete CSS und JavaScript verkleinern; die Datei schrumpft, ist aber schwer lesbar. Beide lassen den Inhalt von <pre> unangetastet. Üblich ist, die eingerückte Quelle zu pflegen und die minimierte Kopie zu veröffentlichen.

Formatieren ist kein Validieren

Das Werkzeug räumt HTML auf, prüft es aber nicht: ein nicht geschlossenes Tag, falsch verschachtelte Elemente oder ein falsch geschriebenes Attribut werden nicht gemeldet. Die offizielle Prüfung übernimmt der W3C-Validator, und der schickt Ihren Code an seinen eigenen Server; diese Seite schickt nichts weg und übernimmt deshalb diese Aufgabe nicht.

Die Einrückung macht Fehler trotzdem sichtbar: Wird ein <div> nie geschlossen, steht alles darunter eine Stufe zu tief, und am Dokumentende taucht eine seltsame Folge schließender Tags auf. Am Aussehen der Seite ändert das Formatieren nichts, mit einer Ausnahme: Ein Zeilenumbruch zwischen zwei Inline-Elementen erscheint im Browser als Leerzeichen. Lange Zeilen werden deshalb im Fließtext zwischen Wörtern umbrochen.

Eingerückt oder minimiert?

Eingerücktes HTML dient dem Lesen und Bearbeiten: eine Vorlage verstehen, einen Fehler finden, Code an Kollegen schicken. Minimiertes HTML dient der Auslieferung: E-Mail-Vorlagen haben Größengrenzen, und für die Ladezeit zählt jedes Kilobyte.

Die Option Minimiert auf dieser Seite verkleinert nur das HTML selbst: Kommentare werden entfernt (außer bedingten Kommentaren für den alten Internet Explorer), Leerraum zwischen Tags fällt weg, <pre> und <textarea> bleiben geschützt. Um auch das eingebettete CSS und JavaScript zu minimieren, Kommentare zu behalten oder einen Vorher-nachher-Vergleich in Byte zu sehen, nutzen Sie das Werkzeug HTML minimieren.

Häufige Fragen

Wie formatiere ich HTML, das in einer Zeile steht?

Fügen Sie den Code links auf dieser Seite ein. Jedes Block-Tag bekommt eine eigene Zeile und wird seiner Verschachtelung entsprechend eingerückt. Das Ergebnis können Sie kopieren oder als .html-Datei herunterladen.

Ändert das Formatieren das Aussehen der Seite?

Zwischen Block-Tags nicht, weil Browser dort Leerraum ignorieren. Ein Zeilenumbruch zwischen Inline-Elementen wie span oder a wird als einzelnes Leerzeichen dargestellt; der Formatierer lässt Inline-Elemente daher möglichst auf einer Zeile. Inhalte von <pre> und <textarea> werden nie verändert.

Zeigt das Werkzeug Fehler in meinem HTML?

Nein, es ist kein Validator. Offene Tags fallen als nach rechts wandernde Einrückung auf, werden aber nicht als Fehler gemeldet. Für die offizielle Prüfung gibt es den W3C-Validator, der Ihren Code an seinen eigenen Server sendet.

Wird mein Code irgendwohin gesendet?

Nein. Das Formatieren läuft in Ihrem Browser; das eingefügte HTML verlässt diese Seite nicht und wird nirgends gespeichert.