HTML Formatter

Що таке форматування HTML?

HTML formatter — це інструмент, який виконує форматування HTML (також відоме як beautification або pretty-printing): він додає узгоджені відступи, переноси рядків та пробіли до HTML-розмітки, щоб її структура вкладеності стала видимою. Браузери ігнорують пробіли під час рендерингу HTML, тому документ, записаний в один рядок, дає той самий результат, що й документ із ретельними відступами. Різниця цілком для людей: відформатований HTML легше читати, відлагоджувати та підтримувати.

Специфікація HTML (підтримувана WHATWG як HTML Living Standard) визначає понад 110 елементів, кожен із власною моделлю вмісту. Блокові елементи на кшталт <div>, <section> та <article> зазвичай починаються з нового рядка і додають відступ для дочірніх елементів. Порожні елементи на кшталт <br>, <img> та <input> не мають закривального тегу та дочірніх елементів для відступу. Хороший форматтер розуміє ці відмінності та застосовує правила відступів відповідно, а не сліпо додає пробіли після кожного тегу.

Форматування найважливіше під час розробки. Мініфікований або згенерований машиною HTML, вивід CMS-платформ та розмітка, скопійована з DevTools браузера, часто надходять як один щільний рядок. Без правильних відступів знайти відсутній закривальний тег або простежити глибоко вкладену структуру займає значно більше часу. HTML formatter перетворює цю стіну тексту на правильно відформатовану, читабельну деревовидну структуру за один крок.

Навіщо використовувати цей HTML Formatter?

Вставте будь-який HTML і миттєво отримайте правильно відформатований результат. Ніяких плагінів для встановлення, конфігураційних файлів для написання, жодних акаунтів для створення.

Сценарії використання HTML Formatter

Правила відступів HTML

Те, як HTML formatter обробляє кожен тип елемента, залежить від його моделі вмісту. Наведена нижче таблиця показує поширені елементи та те, як вони відступають з налаштуваннями 2 та 4 пробіли. Обидва варіанти дають ідентичний рендеринг у браузері; різниця — у читабельності.

Formatter проти Minifier проти Linter

Ці три інструменти працюють із HTML, але слугують різним цілям. Форматування та мініфікація — протилежні перетворення; лінтинг перевіряє помилки, не змінюючи пробіли.

Приклади коду

Як форматувати HTML програмно в популярних мовах та інструментах:

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

Часті запитання