HTML Formatter

Co je formátování HTML?

HTML formátovač je nástroj, který provádí formátování HTML (nazývané také zkrášlování nebo odsazování): přidává konzistentní odsazení, zalomení řádků a mezery do HTML kódu tak, aby byla viditelná jeho struktura zanoření. Prohlížeče při vykreslování HTML ignorují mezery, takže dokument napsaný na jediném řádku produkuje stejný výsledek jako dokument s pečlivým odsazením. Rozdíl je čistě pro lidi: naformátované HTML se snáze čte, ladí a udržuje.

Specifikace HTML (udržovaná skupinou WHATWG jako HTML Living Standard) definuje přes 110 elementů, každý s vlastním obsahovým modelem. Blokové elementy jako <div>, <section> a <article> obvykle začínají na novém řádku a odsazují své potomky. Void elementy jako <br>, <img> a <input> nemají uzavírací značku ani potomky k odsazení. Dobrý formátovač tyto rozdíly chápe a aplikuje pravidla odsazení odpovídajícím způsobem, místo aby slepě přidával mezery za každou značkou.

Formátování je nejdůležitější během vývoje. Minifikované nebo strojově generované HTML, výstup z CMS platforem a kód zkopírovaný z prohlížečových DevTools přichází často jako jeden hustý řádek. Bez správného odsazení trvá nalezení chybějící uzavírací značky nebo sledování hluboko zanořené struktury výrazně déle. HTML formátovač přemění tuto zeď textu na správně odsazenou, čitelnou stromovou strukturu jediným krokem.

Proč použít tento HTML formátovač?

Vložte libovolné HTML a okamžitě získejte správně odsazený výstup. Žádné pluginy k instalaci, žádné konfigurační soubory k psaní, žádné účty k vytváření.

Případy použití HTML formátovače

Pravidla odsazení HTML

Způsob, jakým formátovač zpracovává každý typ elementu, závisí na jeho obsahovém modelu. Tabulka níže ukazuje běžné elementy a jejich odsazení při nastavení 2 mezer a 4 mezer. Obě varianty produkují identické vykreslení v prohlížeči; rozdíl je v čitelnosti.

Formátovač vs. minifikátor vs. linter

Tyto tři nástroje pracují s HTML, ale slouží různým účelům. Formátování a minifikace jsou opačné transformace; linting kontroluje chyby bez změny mezer.

Ukázky kódu

Jak formátovat HTML programově v populárních jazycích a nástrojích:

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

Často kladené otázky