HTML Formatter

Was ist HTML-Formatierung?

Ein HTML-Formatter ist ein Tool, das HTML-Formatierung (auch Beautification oder Pretty-Printing genannt) durchführt: Es fügt konsistente Einrückungen, Zeilenumbrüche und Abstände in HTML-Markup ein, sodass die Verschachtelungsstruktur sichtbar wird. Browser ignorieren Whitespace beim Rendern von HTML, daher erzeugt ein in einer einzigen Zeile geschriebenes Dokument dieselbe Ausgabe wie eines mit sorgfältiger Einrückung. Der Unterschied liegt ausschließlich für den Menschen: Formatiertes HTML ist leichter zu lesen, zu debuggen und zu pflegen.

Die HTML-Spezifikation (vom WHATWG als HTML Living Standard gepflegt) definiert über 110 Elemente, jedes mit seinem eigenen Inhaltsmodell. Block-Level-Elemente wie <div>, <section> und <article> beginnen typischerweise auf einer neuen Zeile und rücken ihre Kindelemente ein. Void-Elemente wie <br>, <img> und <input> haben kein schließendes Tag und keine Kindelemente zum Einrücken. Ein guter Formatter versteht diese Unterschiede und wendet Einrückungsregeln entsprechend an, anstatt blind nach jedem Tag Whitespace hinzuzufügen.

Formatierung ist während der Entwicklung am wichtigsten. Minifiziertes oder maschinell generiertes HTML, Ausgaben von CMS-Plattformen und aus Browser-DevTools kopiertes Markup kommen oft als eine einzige dichte Zeile an. Ohne korrekte Einrückung dauert das Finden eines fehlenden schließenden Tags oder das Nachverfolgen einer tief verschachtelten Struktur deutlich länger. Ein HTML-Formatter verwandelt diese Textwand in einen korrekt eingerückten, lesbaren Baumstruktur in einem einzigen Schritt.

Warum diesen HTML-Formatter verwenden?

Beliebiges HTML einfügen und sofort korrekt eingerückte Ausgabe erhalten. Keine Plugins zu installieren, keine Konfigurationsdateien zu schreiben, keine Konten zu erstellen.

Anwendungsfälle für den HTML-Formatter

HTML-Einrückungsregeln

Wie ein HTML-Formatter jeden Elementtyp behandelt, hängt von seinem Inhaltsmodell ab. Die folgende Tabelle zeigt gängige Elemente und wie sie mit 2-Leerzeichen- und 4-Leerzeichen-Einstellungen eingerückt werden. Beide erzeugen identisches Rendering im Browser; der Unterschied liegt in der Lesbarkeit.

Formatter vs. Minifier vs. Linter

Diese drei Tools arbeiten mit HTML, haben aber unterschiedliche Zwecke. Formatierung und Minifizierung sind entgegengesetzte Transformationen; Linting prüft auf Fehler, ohne Whitespace zu verändern.

Code-Beispiele

HTML programmatisch in gängigen Sprachen und Tools formatieren:

import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>

from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>

package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}

# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

Häufig gestellte Fragen