Как пользоваться: HTML форматер
- Вставьте HTML в поле Входной HTML, перетащите в него файл
.htmlили нажмите Пример. - В режиме Форматирование выберите отступ (2 пробела, 4 пробела или табуляция), ширину переноса строк и способ расположения атрибутов.
- Результат обновляется по мере ввода. Нажмите Копировать или Скачать, чтобы сохранить его.
- Нужно обратное? Переключитесь на Минификацию, чтобы удалить комментарии и сжать пробельные символы для продакшена.
Что такое HTML форматер?
HTML форматер (или бьютифаер) переписывает разметку так, что каждый элемент занимает отдельную строку, а отступы отражают структуру дерева документа. Так вы сразу видите, где закрывается каждый <div>. Это самый быстрый способ прочитать исходный код экспорта из конструктора страниц, HTML-шаблона письма, фрагмента CMS или HTML, который был минифицирован для продакшена. Инструмент использует открытый движок js-beautify, тот же форматер, что встроен в HTML-форматирование VS Code, и также форматирует CSS внутри <style> и JavaScript внутри <script>.
Параметры форматирования
| Параметр | Что делает |
|---|---|
| Отступ | Два пробела — самое распространённое соглашение для HTML; табуляция позволяет каждому разработчику выбрать свою визуальную ширину. |
| Перенос | Разрывает длинные строки текста и атрибутов примерно на выбранной позиции. «Выкл.» оставляет содержимое каждого элемента в одной строке. |
| Атрибуты | «Каждый на своей строке» помещает каждый атрибут на отдельную строку, если у тега их несколько. Удобно для длинных тегов Tailwind или Alpine.js и для чистых диффов в git. |
| Отступ для <head> и <body> | Сдвигает дочерние элементы <head> и <body> на один уровень вглубь, вместо того чтобы выравнивать их по <html>. |
| Сохранять пустые строки | Сохраняет (не более одной) намеренную пустую строку между блоками, а не удаляет их все. |
Строчные элементы, такие как <a>, <strong> и <span>, остаются внутри своей строки текста. Содержимое <pre> и <textarea> никогда не меняется, потому что изменение пробелов там повлияло бы на то, что видит пользователь.
Как работает безопасный минификатор HTML
Пробелы в HTML не всегда незначимы: <b>Hello</b> <i>world</i> выводит видимый пробел между словами. Поэтому минификатор действует осторожно:
- Удаляет комментарии, кроме условных комментариев Internet Explorer (отметьте Сохранять комментарии, чтобы оставить все).
- Сворачивает последовательности пробелов, табуляций и переносов строк в тексте до одного пробела, то есть ровно так, как браузер всё равно их отображает.
- Удаляет пробелы только там, где они никогда не отображаются: внутри
<head>, вокруг<html>,<body>, в строках таблиц и контейнерах списков. - Приводит теги в порядок (
<p class = "a">превращается в<p class="a">), не меняя значения атрибутов. - Не трогает
<pre>,<textarea>и скрипты-шаблоны, минифицирует встроенный CSS, сжимает JSON-LD, а встроенный JavaScript минифицирует только после успешной проверки синтаксиса.
Типичная экономия составляет 10–25% до gzip. Для полноценного сборочного конвейера такие инструменты, как html-minifier-terser, могут сделать больше (удаляя необязательные теги или кавычки), но трансформации при этом становятся рискованнее. Чтобы уменьшить таблицы стилей, используйте CSS минификатор; для скриптов в JavaScript форматере есть собственный режим минификации.
Частые проблемы
Отступы после тега выглядят неправильно. Обычно это незакрытый элемент (например, пропущенный </div>): форматер добросовестно сдвигает всё после него на уровень глубже, и ошибку легко заметить. Синтаксис шаблонов, например блоки Handlebars, Liquid, Jinja или PHP, распознаётся и сохраняется, но сложная логика шаблонов внутри атрибутов всё равно может давать необычные переносы строк.
Также ищут как: html beautifier, html prettifier.
Инструменты, которые хорошо сочетаются с HTML форматер
- CSS Форматер — Превратите минифицированную таблицу стилей в читаемый CSS: одно свойство на строке и правильно вложенные блоки @media.
- HTML-сущности — Экранируйте < > & ", чтобы текст безопасно отображался в HTML, преобразуйте акценты и символы в именованные или числовые сущности либо декодируйте HTML с сущностями обратно в обычный текст.
- HTML в Markdown — Вставьте HTML или скопируйте текст прямо с веб-страницы, из Google Docs или письма, и получите аккуратный Markdown, который можно сразу использовать в README, вики или статическом сайте.
- Markdown в HTML — Введите или вставьте Markdown и мгновенно получите чистый HTML: с безопасным живым предпросмотром, таблицами GFM, списками задач и блоками кода с ограждениями.
Часто задаваемые вопросы
Моя HTML-разметка куда-нибудь загружается?
Изменит ли форматирование внешний вид страницы?
display:inline-block. Содержимое <pre> и <textarea> никогда не меняется.В чём разница между форматированием и валидацией HTML?
Форматирует ли инструмент CSS и JavaScript внутри HTML?
<style> и <script> форматируется с теми же настройками отступов. Скрипты с типами JSON и шаблонов сохраняются без изменений.Насколько уменьшается минифицированный HTML?
Можно ли отформатировать шаблоны Vue, Angular или Svelte?
v-if, @click или [prop]. Однофайловые компоненты с <script setup> и TypeScript форматируются как HTML плюс скрипт.