HTML formatieren bringt unübersichtlichen oder einzeiligen HTML-Code in eine sauber eingerückte, lesbare Struktur: Jedes Tag steht auf einer eigenen Zeile, pro Verschachtelungsebene rutscht der Code zwei Leerzeichen weiter ein. Das hilft beim Prüfen von minifiziertem Quelltext, Template-Ausgaben oder Copy-Paste-HTML aus einem CMS. Leere Elemente wie <br> oder <img> erkennt das Tool automatisch und erhöht die Einrückung danach nicht weiter. Alles läuft direkt im Browser, ganz ohne Installation.
So funktioniert HTML formatieren
Füge deinen HTML-Code in das Textfeld ein – das Ergebnis erscheint sofort darunter, ganz ohne Klick auf einen Button. Das Tool entfernt zunächst vorhandene Leerzeichen und Zeilenumbrüche direkt zwischen zwei Tags und baut die Einrückung anschließend komplett neu auf: Jedes Tag und jeder Textabschnitt stehen auf einer eigenen Zeile, pro Verschachtelungsebene kommen zwei Leerzeichen hinzu. Ein schließendes Tag rutscht dabei automatisch wieder auf die Ebene seines öffnenden Tags zurück.
Lässt du das Feld leer, erscheint der Hinweis „Bitte HTML einfügen.“ Enthält dein Text keine spitzen Klammern, zeigt das Tool stattdessen „Das sieht nicht nach HTML aus.“
Leere Elemente wie <br> und <img>
Manche HTML-Elemente haben keinen eigenen Inhalt und keinen schließenden Tag – <br>, <img>, <hr> und <input> gehören dazu. HTML formatieren erkennt eine feste Liste solcher „leeren“ Elemente (area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr) und erhöht die Einrückung danach nicht weiter, weil ja keine Kindelemente folgen können.
Genauso funktioniert es bei jedem Tag, das du selbst mit einem Schrägstrich schließt, etwa <input /> oder <meine-komponente /> – auch dann bleibt die Einrückung gleich, unabhängig vom Tag-Namen. Bei allen anderen Tags dagegen rückt der folgende Inhalt eine Ebene tiefer ein.
Beispiel
Die Platzhalter-Eingabe <div><p>Hallo <b>Welt</b></p></div> ergibt bei HTML formatieren acht Zeilen mit steigender und wieder fallender Einrückung:
<div>– Ebene 0, keine Einrückung<p>– Ebene 1, zwei LeerzeichenHallo– Ebene 2, vier Leerzeichen<b>– Ebene 2, vier LeerzeichenWelt– Ebene 3, sechs Leerzeichen</b>– wieder Ebene 2, vier Leerzeichen</p>– wieder Ebene 1, zwei Leerzeichen</div>– wieder Ebene 0, keine Einrückung
Jedes schließende Tag steht also exakt auf der Ebene seines öffnenden Gegenstücks – so bleibt die Verschachtelung auch bei mehreren Ebenen auf einen Blick erkennbar.
Wofür brauche ich das?
- Quelltext untersuchen: Die Ansicht „Seitenquelltext anzeigen“ oder eine API-Antwort liefert oft einzeiliges, kaum lesbares HTML – formatiert lässt sich die Struktur auf einen Blick erfassen.
- Templates prüfen: Server- oder CMS-generiertes HTML kommt häufig ohne jede Einrückung heraus; vor dem Debuggen eines Layout-Fehlers hilft eine saubere Struktur.
- Dokumentation und Tutorials: Ein HTML-Beispiel lässt sich so übersichtlich in eine Anleitung oder ein Code-Review übernehmen.
- Verschachtelung nachvollziehen: Bei tief verschachtelten
div-Strukturen zeigt die Einrückung sofort, welches Element zu welchem Elternelement gehört.
Häufige Fragen
Werden meine Eingaben gespeichert?
Prüft HTML formatieren, ob mein Code gültig oder korrekt verschachtelt ist?
Warum wird nach <br> oder <img> nicht weiter eingerückt?
<br> und <img> gehören zu einer festen Liste „leerer“ Elemente ohne eigenen Inhalt, zu der unter anderem auch hr, input und meta zählen. Nach einem solchen Tag erhöht das Tool die Einrückung nicht weiter, weil keine Kindelemente folgen können – anders als bei normalen Elementen mit öffnendem und schließendem Tag.