Как форматировать и делать HTML читаемым в браузере (бесплатно)

Вы копируете исходник живой страницы, вставляете в редактор — и он падает одной строкой на 12 000 символов. Или коллега присылает шаблон письма, где отступы уехали на три табуляции вправо где-то у четвёртой вложенной таблицы. HTML быстро превращается в кашу, а из каши его трудно и читать, и править. Форматировщик HTML приводит его в порядок.

Почему отступы в HTML разъезжаются

Минификаторы намеренно убирают все переносы: файлы поменьше грузятся быстрее. Сборщики вроде webpack и Vite отдают продакшн-HTML одной строкой — отлично для браузера и мучительно для человека. Плюс к этому порча от копипаста: берёшь фрагмент из одного файла, вставляешь в другой с иными отступами, и уровни перестают совпадать. Вложенные таблицы и глубокий «суп» из <div> только усугубляют дело: один пропущенный отступ сбивает всё, что ниже.

Форматировщик не гадает, что вы имели в виду. Он читает реальную структуру тегов и заново выстраивает отступы с нуля, по два пробела на уровень.

HTML — это не XML, и это важно

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

• Одиночные теги вроде <br>, <img>, <hr>, <input> и <meta> вообще не закрываются. Отступите их так, будто закрываются, — и всё, что идёт следом, сместится на уровень глубже, чем нужно.
• Закрывающие теги часто необязательны. Можно написать <li>раз<li>два, и браузер знает, что первый пункт заканчивается там, где начинается второй. То же с <tr>, <td> и <option>.
• Всё внутри <script>, <style>, <pre> и <textarea> — это содержимое, а не разметка. Знак < в вашем JavaScript означает «меньше», а не начало тега.

Этот форматировщик учитывает все три случая. Он знает одиночные теги, применяет правила неявного закрытия для пунктов списка и строк таблицы и переносит блоки script, style и pre без изменений, так что ваш код и пробелы сохраняются ровно как есть.

Форматировать или минифицировать

«Форматировать» — кнопка на каждый день: вставляете плотный HTML, получаете читаемый с аккуратной вложенностью. <ul><li>One</li><li>Two</li></ul> возвращается пятью строками, которые реально видно глазами.

«Минифицировать» — обратный путь. Убирает пробелы между тегами и схлопывает подряд идущие пробелы в тексте до одного, уменьшая файл для продакшена. Script, style и pre при этом не трогает, так что ничего, что зависит от точных пробелов, не сломается.

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

Всё остаётся на вашей машине

Всё выполняется на JavaScript в вашей вкладке. Вставляете лендинг клиента, внутреннюю админку или письмо с метками отслеживания, которые не хочется сливать наружу, — ничего из этого не загружается и не логируется. Загрузите страницу один раз, и она продолжит работать с выключенной сетью.

Вставьте любой HTML в Форматировщик HTML — он расставит отступы, приберёт или минифицирует на месте, без регистрации и загрузки.