HTML-Formatierer

Erhalten Sie gut lesbares, einheitlich eingerücktes HTML aus minifiziertem oder einzeiligem Markup.

Läuft in Ihrem Browser
Keine Uploads
Kein Konto

Ihr Browser-Tool wird geladen…

Was HTML-Formatierer macht

Minifizierte Vorlagen, E-Mail-HTML und aus den Entwicklertools des Browsers kopiertes Markup kommen oft als eine lange Zeile. Fügen Sie es hier ein, und jedes Blockelement steht in einer eigenen Zeile, eingerückt unter seinem Elternelement, sodass Sie die Struktur sehen, einen Diff prüfen oder Verschachtelungsfehler finden können.

Kurze Elemente, etwa ein Listenpunkt mit einem Link, bleiben in einer Zeile, und Inline-Tags in einem Absatz bleiben im Textfluss. Wählen Sie unter „Einrücken mit“ „2 Leerzeichen“, „4 Leerzeichen“ oder „Tab“, passend zu Ihrem Projekt.

Beispiel

Eingabe

<nav><ul><li><a href="/">Start</a></li><li><a href="/docs/">Doku</a></li></ul></nav><p>Hallo <em>zusammen</em></p>

Ergebnis

<nav>
  <ul>
    <li><a href="/">Start</a></li>
    <li><a href="/docs/">Doku</a></li>
  </ul>
</nav>
<p>Hallo <em>zusammen</em></p>

nav und ul erhalten eigene Zeilen, während jeder Listenpunkt und der Absatz in einer Zeile bleiben, weil sie nur Inline-Inhalt enthalten.

Anleitung: HTML-Formatierer

Fügen Sie HTML in das Feld „HTML“ ein, oder klicken Sie auf „Datei öffnen“.
Wählen Sie unter „Einrücken mit“ „2 Leerzeichen“, „4 Leerzeichen“ oder „Tab“.
Klicken Sie auf „Kopieren“ oder auf „.html herunterladen“.

Gut zu wissen

Das Tool formatiert, validiert aber nicht. Fehlende schließende Tags werden nicht gemeldet; sie zeigen sich als unerwartete Verschachtelung im eingerückten Ergebnis.
Folgen von Leerzeichen und Zeilenumbrüchen in normalem Text werden zu einzelnen Leerzeichen zusammengefasst, so wie ein Browser sie anzeigt.
Es gibt keine Minify-Option. Um HTML für die Produktion zu verkleinern, nutzen Sie den Minifier Ihres Build-Tools.
Um zusätzlich Stile, Klassen oder unsichere Tags zu entfernen, nutzen Sie stattdessen HTML bereinigen.

Fragen zu HTML-Formatierer

Wie formatiere ich HTML online?

Fügen Sie das HTML in das Feld ein, und die formatierte Version erscheint sofort. Wählen Sie Ihre Einrückung und kopieren Sie das Ergebnis dann oder laden Sie es als .html-Datei herunter.

Kann das Formatieren von HTML das Aussehen der Seite ändern?

Selten. Browser ignorieren Leerraum zwischen Blockelementen. Die Ausnahme sind nebeneinanderstehende inline- oder inline-block-Elemente, bei denen ein Zeilenumbruch dazwischen eine kleine sichtbare Lücke erzeugen kann.

Sollte ich HTML mit 2 oder 4 Leerzeichen einrücken?

Zwei Leerzeichen sind die häufigste Wahl für HTML, weil Markup tief verschachtelt ist und Zeilen schnell lang werden. Vier Leerzeichen oder Tabs sind in Ordnung, wenn Ihr Projekt sie bereits nutzt; Einheitlichkeit zählt mehr als die Zahl.

Kann ich HTML-E-Mail-Vorlagen formatieren?

Ja. Tabellenlastiges E-Mail-Markup ist viel leichter nachzuvollziehen, wenn jede Tabelle, Zeile und Zelle in einer eigenen Zeile steht, und die Inline-Stile, auf die E-Mail-Programme angewiesen sind, bleiben wie geschrieben.