Форматирование или минификация HTML
Бесплатный онлайн HTML-форматтер и минификатор, работающий в браузере. Вставьте любой HTML — тул определит нужно ли его прихорошить (компактный однострочный → с отступами) или сжать (с отступами → однострочный), или выберите направление вручную. Отступ — 2 пробела, 4 пробела или tab. Void-элементы (br, hr, img, input, meta, link) могут быть самозакрывающимися в XHTML-стиле или голыми в HTML5-стиле. Пробелы внутри <pre>, <script> и <style> сохраняются дословно — не трогаются. Комментарии можно опционально удалить в обоих направлениях.
Как пользоваться
Направление авто-определяется по умолчанию.
2 пробела — стандарт для большинства frontend-гайдов.
Прихорошенная или сжатая версия появляется справа.
Копия в буфер или сохранение как .html.
Форматирование или минификация HTML в браузере — сохраняет содержимое <pre>, <script>, <style> дословно
Особенности
Типичные применения
- Прихорошить вставленный минифицированный HTML-файл для изучения структуры.
- Минифицировать HTML-email-шаблон перед деплоем — экономит байты на каждой рассылке.
- Конвертировать HTML5 void-элементы в XHTML самозакрытие для XML-строгого пайплайна.
- Удалить developer-комментарии из production HTML-сборки.
- Переотступить вручную правленный шаблон под командные конвенции.
Почему именно этот
Многие браузерные форматтеры портят содержимое <pre> или <script> — копируешь сниппет кода через такой, и отступы сломаны. Мы распознаём raw-text элементы (script, style, pre, textarea) и оставляем их содержимое нетронутым байт-в-байт. Всё остальное получает чистые поблочные отступы. Без регистрации, без квоты на файл.
Частые вопросы
Что такое «void-элемент»?
HTML-элемент без закрывающего тега и без содержимого — br, hr, img, input, meta, link, source, track, area, base, col, embed, param, wbr. В HTML5 их можно писать как <br> (предпочтительно) или <br /> (XHTML-legacy). Выбирайте то, что ожидает ваш linter.
Изменяет ли содержимое <script> или <style>?
Нет. Всё внутри <script>, <style>, <pre> и <textarea> сохраняется байт-в-байт. Обработка пробелов вокруг этих тегов следует правилам HTML5 raw-text элементов.
Почему мой минифицированный вывод всё ещё со пробелами?
Минификация сжимает inter-tag пробелы, но сохраняет хотя бы один пробел где он семантически значим (между inline-элементами). Для агрессивной минификации (ноль пробелов) используйте специализированный минификатор как html-minifier-terser.
Починит ли это незакрытые теги?
Нет — тул чисто форматтер. Если у вас незакрытые <div>, вывод отразит (поломанную) структуру. Используйте валидатор вроде W3C Nu Validator для структурного линта.
Обрабатывает шаблонизирующий синтаксис как @{{ ... }} или {% %}?
Старается оставить большинство шаблонных токенов нетронутыми, но Blade ({{ }}), Twig ({% %}), Vue ({{ }}) и т.д. могут получить странные пробелы. Для шаблонов с тяжёлой интерполяцией форматируйте отрендеренный HTML или используйте шаблонизатор-aware тул.
На мобильном?
Да — ввод и вывод стекаются на узких экранах.
Мы можем! И это бесплатно. Просто отправьте нам сообщение с вашим пожеланием. Если хотите обсудить детали — оставьте свою почту, и мы с вами свяжемся. Можно анонимно.
