HTML Formatter

Что такое форматирование HTML?

HTML Formatter — это инструмент, выполняющий форматирование HTML (также называемое «украшением» или «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

Обращение форматтера с каждым типом элемента зависит от его контентной модели. В таблице ниже показаны распространённые элементы и их вид при отступах в 2 и 4 пробела. Оба варианта дают идентичный рендеринг в браузере; разница только в читаемости.

Форматтер vs. Минификатор vs. Линтер

Эти три инструмента работают с 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

Часто задаваемые вопросы