Форматирование и минификация HTML

Что такое форматтер HTML?#

Форматтер HTML берёт разметку, потерявшую форму, — выход шаблонизатора, схлопнувшего все теги в одну строку, фрагмент, вставленный с чужим стилем отступов, или кусок шаблона письма, нараставший месяцами, — и переформатирует её так, чтобы вложенность была видна с первого взгляда. Обратная задача — минификация — ужимает ту же разметку, убирая всё, что браузеру не нужно: комментарии и пробелы между тегами.

Страница делает и то и другое, и направления построены по-разному — HTML этого требует. Форматировать использует html_beautify из js-beautify, который единообразно расставляет отступы и сохраняет те переводы строк, которые вам действительно нужны. Сжать — консервативный рукописный сканер. Главное правило, которому он следует, — содержимое элементов <pre>, <code>, <textarea>, <script> и <style> остаётся совершенно нетронутым: схлопывание пробелов внутри <pre> или <script> испортило бы страницу, потому что в этих элементах пробелы — часть данных, а не украшение. Наивный минификатор, который этого не знает, — это как раз то, отчего пример кода на живом сайте внезапно теряет отступы.

Как пользоваться#

1. Вставьте разметку в панель HTML слева или нажмите Пример для короткого документа.
2. Выберите Отступ на панели инструментов: 2 пробела, 4 пробела (значение по умолчанию для HTML) или Табуляция. Четыре пробела — распространённый стиль для разметки, потому что вложенные теги разрастаются быстро.
3. Нажмите действие:
   • Форматировать — переформатирует отступы через js-beautify, сохраняя существующие переводы строк, поэтому вручную разбитые строки не слипаются.
   • Сжать — удаляет HTML-комментарии, схлопывает пробелы между тегами в ноль и подрезает пробелы в обычных текстовых узлах, оставляя содержимое <pre>, <code>, <textarea>, <script> и <style> ровно как написано.
4. Прочитайте результат в панели Вывод. Возьмите его через Копировать в шапке вывода; Очистить сбрасывает обе панели.

Ключевые возможности#

• Сохраняет то, что важно. Содержимое <pre>, <code>, <textarea>, <script> и <style> копируется дословно при минификации. Пробелы внутри этих элементов значимы; их удаление изменило бы то, что отрендерит браузер.
• Комментарии убираются при минификации, остаются при форматировании. Блоки <!-- ... --> удаляются, только когда вы явно просите сжать. При форматировании они остаются на месте.
• Удобный для HTML отступ по умолчанию. Четыре пробела: глубоко вложенная разметка читается лучше с более широким шагом. Переключитесь на 2 или табуляцию, если того требует ваш проект.
• Две панели, готово к копированию. Редактируемый вход, выход только для чтения, копирование одним кликом.
• Работает только в вашем браузере. js-beautify встроен в страницу и подгружается по требованию; бэкенда нет, отправки нет, разметка остаётся на вашем устройстве.

Разбор примера#

Фрагмент карточки товара, вытащенный из шаблона, с комментарием и блоком <pre> внутри:

Ввод:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

Нажмите Форматировать с отступом 4 пробела:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

Теперь нажмите Сжать на том же входе:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

На что стоит обратить внимание. Комментарий ушёл. Пробелы между тегами ушли — </span> и <pre> теперь стоят вплотную друг к другу, что безопасно, потому что пробелы между тегами в HTML носят декоративный характер. Но перевод строки внутри <pre> (npm install над npm run build) остался, как написано. Это и есть правило в действии: декор схлопнуть, данные сохранить.

FAQ#

Почему после минификации некоторые одиночные пробелы между тегами сохраняются?#

Текстовые узлы, состоящие только из пробелов и расположенные между блочными тегами, удаляются целиком. Но одиночный пробел внутри строки текста — Hello <em>world</em> — значим, потому что его удаление сольёт слова. Сканер сохраняет значимые пробелы в текстовых узлах и убирает только чисто декоративные межтеговые пробелы.

Удаляет ли минификация атрибуты, кавычки или значения по умолчанию?#

Нет. Она не переписывает синтаксис атрибутов, не снимает кавычки, не коллапсирует булевы атрибуты и не удаляет type="text". Эти преобразования требуют полноценного HTML-парсера со знанием схемы и легко выполняются неверно; инструмент остаётся на безопасной стороне и удаляет только комментарии и декоративные пробелы.

Минифицирует ли он JavaScript внутри моих тегов <script>?#

Нет. Всё содержимое <script> проходит нетронутым — и потому, что его изменение может сломать ASI, и потому, что отдельный JS-минификатор живёт на странице format/js. Если хотите минифицировать скрипт, вытащите его, прогоните через тот инструмент и вставьте обратно.

Понимает ли он синтаксис шаблонизаторов вроде {{ var }} или {% if %}?#

Форматирование переформатирует отступы вокруг токенов шаблона и обычно даёт читаемый выход. Минификация относится к тегам шаблонизатора как к обычному тексту и не схлопывает пробелы внутри них так, чтобы это меняло их смысл. Для тяжёлой шаблонизации считайте выход сильной отправной точкой и проверьте против вашего рендерера.