HTML Formatter

Wat is HTML-opmaak?

Een HTML-formatter is een hulpmiddel dat HTML-opmaak uitvoert (ook wel beautification of pretty-printing genoemd): het voegt consistente inspringing, regelafbrekingen en spatiëring toe aan HTML-markup, zodat de nestingstructuur zichtbaar wordt. Browsers negeren witruimte bij het weergeven van HTML, zodat een document dat op één enkele regel is geschreven, hetzelfde resultaat oplevert als een document met zorgvuldige inspringing. Het verschil is volledig voor mensen: opgemaakte HTML is gemakkelijker te lezen, te debuggen en te onderhouden.

De HTML-specificatie (beheerd door WHATWG als de HTML Living Standard) definieert meer dan 110 elementen, elk met een eigen inhoudsmodel. Elementen op blokniveau zoals <div>, <section> en <article> beginnen doorgaans op een nieuwe regel en springen hun kinderen in. Lege elementen zoals <br>, <img> en <input> hebben geen sluitingstag en geen kinderen om in te springen. Een goede formatter begrijpt deze onderscheidingen en past inspringingsregels dienovereenkomstig toe, in plaats van blindelings witruimte na elke tag toe te voegen.

Opmaak is het belangrijkst tijdens de ontwikkeling. Geminificeerde of machinaal gegenereerde HTML, uitvoer van CMS-platforms en markup gekopieerd uit browser DevTools komt vaak aan als één enkele aaneengesloten regel. Zonder correcte inspringing kost het opsporen van een ontbrekende sluitingstag of het traceren van een diep geneste structuur aanzienlijk meer tijd. Een HTML-formatter zet die muur van tekst in één stap om in een correct ingesprongen, leesbare boomstructuur.

Waarom deze HTML Formatter gebruiken?

Plak een willekeurige HTML en ontvang direct correct ingesprongen uitvoer. Geen plugins te installeren, geen configuratiebestanden te schrijven, geen account aan te maken.

Toepassingen van de HTML Formatter

HTML-inspringingsregels

Hoe een HTML-formatter elk elementtype behandelt, hangt af van zijn inhoudsmodel. De onderstaande tabel toont veelvoorkomende elementen en hoe ze worden ingesprongen met instellingen van 2 en 4 spaties. Beide produceren identieke weergave in de browser; het verschil is leesbaarheid.

Formatter vs. Minifier vs. Linter

Deze drie hulpmiddelen werken op HTML maar dienen verschillende doeleinden. Opmaak en minificatie zijn tegengestelde transformaties; linting controleert op fouten zonder witruimte te wijzigen.

Codevoorbeelden

HTML programmatisch formatteren in populaire talen en hulpmiddelen:

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

Veelgestelde vragen