HTML formatieren

Wofür ein HTML Formatter da ist

HTML kommt oft in einem Zustand an, der schwer zu lesen ist. Ein CMS-Export packt eine ganze Seite in eine Zeile. Eine Template-Engine hinterlässt seltsame Lücken. Kopierst du aus dem Seitenquelltext des Browsers, bekommst du, was der Server geschickt hat. Ein HTML Formatter baut die Einrückung neu auf, sodass jedes verschachtelte Element eine Ebene tiefer sitzt als sein Elternelement, und du siehst die Struktur der Seite auf einen Blick.

Diese Seite nutzt Prettier 3 in deinem Browser. Neben dem Markup formatiert sie auch CSS in style-Tags und JavaScript in script-Tags, eine ganze Seite wird also in einem Durchgang ordentlich.

So nutzt du ihn

1. Füge dein HTML in das linke Feld ein. Das Formatieren beginnt sofort beim Einfügen.
2. Oder klicke auf Datei öffnen, um eine .html-Datei zu laden, oder auf Beispiel, um ein Beispiel auszuprobieren.
3. Wähl die Einrückung: 2 Leerzeichen, 4 Leerzeichen oder Tabs.
4. Stell die Zeilenbreite ein. Zeilen mit vielen Attributen oder langem Text werden bei dieser Breite umbrochen.
5. Wähl einen Modus für Leerraum: CSS-Display beachten, Ignorieren oder Streng. Die Voreinstellung ist die sichere.
6. Klicke auf Formatieren oder drück Strg+Enter. Klicke auf Minifizieren für die kompakte Version.
7. Klicke auf Kopieren oder auf Herunterladen, um eine .html-Datei zu speichern.

Sobald der Formatter einmal gelaufen ist, aktualisiert er die Ausgabe beim Tippen. Hat ein Skript- oder Style-Block innerhalb der Seite einen Syntaxfehler, bleibt dieser Block so, wie du ihn geschrieben hast, und der Rest der Seite wird trotzdem formatiert. Um den Fehler zu finden, füge das Skript in den JavaScript Formatter ein, der Zeile und Spalte meldet.

Vorher und nachher

Eine Zeile HTML:

<!DOCTYPE html><html><head><title>Shop</title></head><body><nav><a href="/">Home</a><a href="/cart">Cart</a></nav><main><h1>Welcome</h1><p>Pick a <b>product</b> to start.</p><ul><li>Tea</li><li>Coffee</li></ul></main></body></html>

Nach Formatieren mit 2 Leerzeichen:

<!DOCTYPE html>
<html>
  <head>
    <title>Shop</title>
  </head>
  <body>
    <nav><a href="/">Home</a><a href="/cart">Cart</a></nav>
    <main>
      <h1>Welcome</h1>
      <p>Pick a <b>product</b> to start.</p>
      <ul>
        <li>Tea</li>
        <li>Coffee</li>
      </ul>
    </main>
  </body>
</html>

Die beiden Links im nav bleiben in einer Zeile. Im Quelltext steht zwischen ihnen kein Leerzeichen, und ein Zeilenumbruch würde eine sichtbare Lücke zwischen ihnen erzeugen. Das ist der Modus CSS-Display beachten bei der Arbeit.

Eingebettete Blöcke werden nach ihren eigenen Regeln formatiert:

<style>
  body {
    margin: 0;
  }
</style>
<script>
  const a = 1;
  console.log(a);
</script>

Die Option Leerraum

In HTML wird ein Zeilenumbruch zwischen zwei Inline-Elementen als Leerzeichen dargestellt. Deshalb müssen Formatter vorsichtig sein. Hier ist derselbe Absatz bei einer Zeilenbreite von 40.

Mit CSS-Display beachten:

<p>
  Read the <a href="/terms">terms</a>,
  then press <button>Accept</button>.
</p>

Mit Ignorieren:

<p>
  Read the
  <a href="/terms">terms</a>
  , then press
  <button>Accept</button>
  .
</p>

Die zweite Version sieht ordentlich aus, aber der Browser zeigt jetzt ein Leerzeichen vor dem Komma und vor dem Punkt. Nimm Ignorieren nur für Markup, bei dem das keine Rolle spielt, etwa E-Mail-Vorlagen, die du per Auge prüfst, oder XML-artiges HTML ohne Inline-Text.

HTML minifizieren

Minifizieren verkleinert die Seite, ohne zu ändern, was sie zeigt. Bei dieser Eingabe:

<div class="card">
  <!-- price -->
  <p>
    Only   <b>$5</b>   today
  </p>
</div>

ist das Ergebnis:

<div class="card"><p>Only <b>$5</b> today</p></div>

Kommentare werden entfernt, mehrfache Leerzeichen werden zu einem, und Leerzeichen neben Blockelementen wie div und p fallen weg. Leerzeichen zwischen Inline-Wörtern bleiben, weil sonst Wörter zusammenkleben würden. Inhalte in pre, textarea und script bleiben unangetastet, und CSS in style-Tags wird nach denselben sicheren Regeln minifiziert wie im CSS Formatter.

Grenzen

• HTML ist nachsichtig, ein fehlendes schließendes Tag ist deshalb oft kein Fehler. Die Eingabe <div><p>Hello</div> kommt als <div><p>Hello</p></div> zurück, der Absatz wird für dich geschlossen. Achte auf die Ausgabe, um vergessene Tags zu entdecken.
• Formatieren validiert keine Attribute, prüft keine Barrierefreiheit und repariert keine ungültige Verschachtelung. Dafür gibt es den W3C-Validator.
• Template-Syntax wie Handlebars oder Jinja kann den Parser verwirren. Formatiere das gerenderte HTML oder nimm einen Formatter für diese Template-Sprache.
• Umlaute und Sonderzeichen bleiben so, wie du sie eingefügt hast. Der Formatter wandelt weder ä in ä um noch umgekehrt.

Andere Wege, HTML zu formatieren

• VS Code hat einen eingebauten HTML-Formatter. Führe Dokument formatieren aus (Umschalt+Alt+F unter Windows, Umschalt+Option+F unter macOS). Die Prettier-Erweiterung liefert ein Ergebnis, das zu dieser Seite passt.
• Kommandozeile: npx prettier --write index.html.
• Entwicklertools im Browser zeigen im Bereich Elemente einen formatierten DOM-Baum, aber das ist die Live-Seite, nachdem Skripte gelaufen sind, nicht dein Quelltext.

Wenn du den Inhalt einer Seite als Markdown statt als HTML brauchst, erledigt das der Konverter HTML in Markdown. Für Skripte außerhalb der Seite nimm den JavaScript Formatter.