Formatowanie HTML

Czym jest formatowanie HTML?

Formatter HTML to narzędzie wykonujące formatowanie HTML (zwane też upiększaniem lub czytelnym wydrukiem): dodaje spójne wcięcia, podziały wierszy i odstępy do znaczników HTML, dzięki czemu jego struktura zagnieżdżenia staje się widoczna. Przeglądarki ignorują białe znaki podczas renderowania HTML, więc dokument zapisany w jednej linii daje taki sam wynik jak dokument z starannymi wcięciami. Różnica jest wyłącznie dla ludzi: sformatowany HTML jest łatwiejszy do czytania, debugowania i utrzymania.

Specyfikacja HTML (utrzymywana przez WHATWG jako HTML Living Standard) definiuje ponad 110 elementów, każdy z własnym modelem zawartości. Elementy blokowe, takie jak <div>, <section> i <article>, zazwyczaj zaczynają się od nowej linii i wcięcia swoich dzieci. Elementy pustki, takie jak <br>, <img> i <input>, nie mają tagu zamykającego ani dzieci do wcięcia. Dobry formatter rozumie te różnice i stosuje reguły wcięcia odpowiednio, zamiast ślepo dodawać białe znaki po każdym tagu.

Formatowanie ma największe znaczenie podczas tworzenia oprogramowania. Zminifikowany lub wygenerowany maszynowo HTML, dane wyjściowe platform CMS oraz znaczniki skopiowane z DevTools przeglądarki często trafiają jako jedna gęsta linia. Bez odpowiednich wcięć znalezienie brakującego tagu zamykającego lub prześledzenie głęboko zagnieżdżonej struktury zajmuje znacznie więcej czasu. Formatter HTML zamienia tę ścianę tekstu w prawidłowo wciętą, czytelną strukturę drzewa w jednym kroku.

Dlaczego warto używać tego formattera HTML?

Wklej dowolny HTML i natychmiast otrzymaj prawidłowo wciętą odpowiedź. Bez wtyczek do instalacji, bez plików konfiguracyjnych do napisania, bez kont do zakładania.

Zastosowania formattera HTML

Reguły wcięć HTML

Sposób, w jaki formatter HTML traktuje każdy typ elementu, zależy od jego modelu zawartości. Poniższa tabela pokazuje popularne elementy i ich wcięcia przy ustawieniach 2-spacjowym i 4-spacjowym. Oba dają identyczne renderowanie w przeglądarce; różnica dotyczy czytelności.

Formatter kontra minifier kontra linter

Te trzy narzędzia działają na HTML, ale służą różnym celom. Formatowanie i minifikacja to przeciwstawne transformacje; linting sprawdza błędy bez zmiany białych znaków.

Przykłady kodu

Jak formatować HTML programistycznie w popularnych językach i narzędziach:

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

Często zadawane pytania