HTML Formatter

Vad är HTML-formatering?

En HTML-formatterare är ett verktyg som utför HTML-formatering (även kallat beautification eller pretty-printing): det lägger till konsekvent indragning, radbrytningar och mellanrum i HTML-kod så att nästningsstrukturen blir synlig. Webbläsare ignorerar blanksteg vid rendering, så ett dokument skrivet på en enda rad ger samma resultat som ett med noggrann indragning. Skillnaden är helt och hållet för oss människor: formaterad HTML är lättare att läsa, felsöka och underhålla.

HTML-specifikationen (underhållen av WHATWG som HTML Living Standard) definierar över 110 element, vart och ett med sin egen innehållsmodell. Blocknivåelement som <div>, <section> och <article> börjar vanligtvis på en ny rad och drar in sina barn. Void-element som <br>, <img> och <input> har varken stängningstagg eller barn att dra in. En bra formatterare förstår dessa skillnader och tillämpar indragningsregler därefter, i stället för att blint lägga till blanksteg efter varje tagg.

Formatering spelar störst roll under utvecklingsfasen. Minifierad eller maskinsgenererad HTML, utdata från CMS-plattformar och uppmärkning kopierad från webbläsarens DevTools anländer ofta som en enda tät rad. Utan korrekt indragning tar det betydligt längre tid att hitta en saknad stängningstagg eller spåra en djupt nästlad struktur. En HTML-formatterare omvandlar den väggen av text till en korrekt indragen, läsbar trädstruktur i ett enda steg.

Varför använda den här HTML-formatteraren?

Klistra in valfri HTML och få korrekt indragen utdata direkt. Inga tillägg att installera, inga konfigurationsfiler att skriva, inga konton att skapa.

Användningsområden för HTML-formatteraren

HTML-indragningsregler

Hur en HTML-formatterare behandlar varje elementtyp beror på dess innehållsmodell. Tabellen nedan visar vanliga element och hur de dras in med 2-stegs och 4-stegs inställningar. Båda ger identisk rendering i webbläsaren; skillnaden är läsbarhet.

Formatterare vs. minifierare vs. linter

Dessa tre verktyg arbetar med HTML men tjänar olika syften. Formatering och minifiering är motsatta transformationer; linting kontrollerar efter fel utan att ändra blanksteg.

Kodexempel

Så här formaterar du HTML programmatiskt i populära språk och verktyg:

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

Vanliga frågor