Warum bleiben manche Tags in derselben Zeile?

Weil sie zu trennen die Seite veränderte. ` a b ` wird als „ab“ dargestellt; setzen Sie einen Umbruch dazwischen, zeigt der Browser „a b“. Der Leerraum zwischen zwei Inline-Elementen ist Inhalt: der Formatierer rückt also um Blockelemente herum ein und lässt Inline-Folgen in Ruhe. Der HTML-Minifizierer dieser Seite wendet dieselbe Regel in der Gegenrichtung an.

Wird mein ` `-Block neu eingerückt?

Nein. In einem ` ` wird jedes Leerzeichen und jeder Umbruch so angezeigt, wie er dasteht — daran zu rühren schriebe um, was Ihre Besucher sehen. Dasselbe gilt für ` `, dessen Inhalt der Wert des Feldes ist, und für ` ` und ` `, deren Inhalt gar kein HTML ist.

Repariert er kaputtes HTML?

Nein — er ist ein Formatierer, kein Prüfer und kein Reparaturwerkzeug. ` x ` kommt eingerückt zurück, das ` ` weiterhin offen: das Werkzeug setzt, was es liest, statt zu raten, was Sie meinten. Ein aufgeräumtes Ergebnis sagt nichts darüber, wie das Dokument analysiert wird.

HTML-Formatter — den Quelltext einer Seite lesen

HTML neu einrücken. Inline-Elemente behalten ihre Zeile, denn ein Umbruch dazwischen ist ein Leerzeichen auf der Seite: lesbar, ohne dass etwas verrutscht.

Sofort Privat Null Cookies

Einrückung

HTML-Eingabe

HTML-Ausgabe

Was dieses Werkzeug tut

Aus minifiziertem oder schlecht eingerücktem HTML wird lesbares HTML.

<ul><li>a</li><li>b</li></ul>

<ul>
  <li>a</li>
  <li>b</li>
</ul>

Eine Einrückungsstufe je Verschachtelungsstufe, zwei Leerzeichen als Vorgabe und vier, wenn Ihnen das lieber ist. Tag-Namen, Attribute und deren Reihenfolge bleiben unangetastet: das hier ist Satz, keine Umschrift.

Ein Zeilenumbruch ist nicht umsonst

<p>Hallo <b>Welt</b> nochmal</p>

Das bleibt in einer Zeile. In HTML gehört der Leerraum zwischen zwei Inline-Elementen zum Text: brechen Sie die Zeile zwischen </b> und nochmal, haben Sie ein Leerzeichen hinzugefügt — sichtbar im Rendering, in einer Auswahl, beim Kopieren. Der Formatierer rückt daher um Blockelemente herum ein (div, p, ul, table…) und lässt Folgen von Inline-Inhalt in Ruhe, so lang sie auch werden.

Es ist dieselbe Regel, die der HTML-Minifizierer in der Gegenrichtung anwendet, und aus demselben Grund: nichts, was die gerenderte Seite verändert, zählt als Formatieren.

Was er nie anfasst

<pre> und <textarea>. Ihr Leerraum wird genau so angezeigt, wie er geschrieben steht — neu einzurücken schriebe die Seite und den Feldwert um.
<script> und <style>. Ihr Inhalt ist JavaScript und CSS, nicht HTML; dafür sind die JavaScript- und CSS-Formatierer dieser Seite da.
Ihre Attribute. Namen, Werte, Anführungszeichen und Reihenfolge kommen heraus, wie sie hineingingen, Leerzeichen innerhalb eines Wertes eingeschlossen.

Er ist kein Prüfer

<div><p>x</div>

<div>
  <p>x
</div>

Das nicht geschlossene <p> kommt nicht geschlossen zurück. Ein Formatierer liest das Dokument, das Sie ihm geben, und setzt es; zu raten, wo ein Tag schließen sollte, hieße Ihr Markup nach Gefühl umzuschreiben. Ob ein Dokument wohlgeformt ist, sagt Ihnen ein Validator — der des W3C oder die Entwicklerwerkzeuge Ihres Browsers, die den Baum zeigen, den der Parser tatsächlich gebaut hat.

Datenschutz ab Werk

Alles läuft lokal in deinem Browser mit JavaScript. Deine Daten werden nie hochgeladen, wodurch das Tool auch für sensible Inhalte sicher ist und offline funktioniert.

Häufige Fragen

Warum bleiben manche Tags in derselben Zeile?: Weil sie zu trennen die Seite veränderte. `<span>a</span><span>b</span>` wird als „ab“ dargestellt; setzen Sie einen Umbruch dazwischen, zeigt der Browser „a b“. Der Leerraum zwischen zwei Inline-Elementen ist Inhalt: der Formatierer rückt also um Blockelemente herum ein und lässt Inline-Folgen in Ruhe. Der HTML-Minifizierer dieser Seite wendet dieselbe Regel in der Gegenrichtung an.
Wird mein `<pre>`-Block neu eingerückt?: Nein. In einem `<pre>` wird jedes Leerzeichen und jeder Umbruch so angezeigt, wie er dasteht — daran zu rühren schriebe um, was Ihre Besucher sehen. Dasselbe gilt für `<textarea>`, dessen Inhalt der Wert des Feldes ist, und für `<script>` und `<style>`, deren Inhalt gar kein HTML ist.
Repariert er kaputtes HTML?: Nein — er ist ein Formatierer, kein Prüfer und kein Reparaturwerkzeug. `<div><p>x</div>` kommt eingerückt zurück, das `<p>` weiterhin offen: das Werkzeug setzt, was es liest, statt zu raten, was Sie meinten. Ein aufgeräumtes Ergebnis sagt nichts darüber, wie das Dokument analysiert wird.