Как отформатировать HTML и XML: beautify и минификация

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

Отформатировать код с отступами или сжать его в одну строку можно прямо в браузере в форматтере HTML и XML — без установки редактора и без отправки кода на сервер.

«Отформатировать HTML» — это не про теги b, i, strong

Здесь легко перепутать два разных смысла слова «форматирование». Есть форматирование текста — теги <b>, <i>, <strong>, <em>, которые делают часть текста жирной или курсивом. А есть форматирование кода — это про читаемость разметки: отступы по вложенности, перенос каждого тега на новую строку. Инструмент ниже занимается вторым: не трогает содержимое тегов, только расставляет отступы, чтобы структуру можно было читать глазами.

<!-- До форматирования -->
<div class="card">
	<h3>Заголовок</h3>
	<p>Текст карточки</p>
</div>

<!-- После форматирования -->
<div class="card">
	<h3>Заголовок</h3>
	<p>Текст карточки</p>
</div>

Чем HTML отличается от XML при форматировании

Тип документа инструмент определяет автоматически по содержимому, но обрабатывает их по-разному, потому что у форматов разная строгость.

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

XML требует строгого синтаксиса: каждый открытый тег обязан быть закрыт, а вложенность — соблюдена без исключений. Если в документе это нарушено, форматтер не станет угадывать, что имелось в виду, — он покажет ошибку разбора вместо результата. Это не баг инструмента, а свойство формата: невалидный XML в принципе нельзя однозначно превратить в дерево, а значит, и красиво расставить отступы.

Beautify или минификация — по задаче

Одна и та же операция форматирования обратима: тот же инструмент умеет и разворачивать код в читаемый вид, и сжимать его обратно в одну строку.

• Beautify (отступы) нужен, когда с кодом предстоит работать человеку: разобраться в чужой вёрстке, найти конкретный тег, показать структуру коллеге.
• Минификация нужна перед выкладкой в продакшн: убирает переносы строк и лишние пробелы, файл становится легче и быстрее грузится. Комментарии при этом можно сохранить или тоже вырезать — это отдельная настройка.

Между режимами переключается один тумблер, а не два разных инструмента.

Сколько пробелов на отступ

Для beautify-режима есть выбор между 2, 4 и 8 пробелами на уровень вложенности. Универсального правильного варианта нет — важно совпадение со стилем остального проекта: если в репозитории .editorconfig или конфиг Prettier уже задают отступ, берите его же, а не свой любимый.

Форматирование — не то же самое, что проверка

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

Данные не покидают браузер

Разбор, форматирование и минификация выполняются полностью на стороне клиента — вставленный код никуда не отправляется. Из этого следует практическое ограничение: скорость обработки зависит от вашего устройства, а не от сервера, поэтому очень большие документы (от 10 МБ) могут обрабатываться заметно дольше обычного.

Итог

«Отформатировать HTML» на практике означает одно из двух: либо разложить код по отступам для читаемости, либо, наоборот, сжать его в одну строку перед продакшеном. XML требует более строгого синтаксиса и честно сообщает об ошибке, если структура нарушена, вместо того чтобы угадывать. Прогнать через оба режима удобнее всего в форматтере выше — результат появляется сразу по мере вставки кода.