Untangle messy HTML into clean, indented markup

Вставьте любой HTML — даже однострочный минифицированный вывод из сборочного конвейера — и инструмент переформатирует его с правильными отступами, по одному тегу на строку и единообразными пробелами. Выберите отступ в 2, 4 или 8 пробелов. Результат готов к вставке в редактор или в комментарий код-ревью.

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

Нет — js-beautify (движок под капотом) обнаруживает блоки script и style и форматирует их содержимое по соответствующим правилам JS или CSS, поэтому встроенные скрипты остаются валидными, а таблицы стилей — читаемыми. Самозакрывающиеся теги, пустые элементы и атрибуты с пространствами имён (svg:xmlns, xlink:href) обрабатываются корректно.

Он хорошо работает с обычным HTML и HTML-подобными шаблонами, но чистый JSX (выражения в фигурных скобках, фрагменты, теги компонентов с заглавной буквы) разбирается как HTML и может получить незначительные косметические недочеты. Для кода, специфичного для фреймворков, мы рекомендуем Prettier, настроенный под ваш диалект; для чистого HTML, файлов .htm и шаблонов наш инструмент идеален.

Никакой загрузки не происходит. Форматировщик работает полностью в вашем браузере с помощью js-beautify, поэтому вы можете безопасно вставлять внутренние шаблоны страниц, черновики писем или HTML с приватными данными — ничего не покинет ваше устройство.

Минификация удаляет HTML-комментарии, сводит любую последовательность пробелов между тегами к одному и убирает переносы строк. Результат — HTML, который отображается побайтово идентично, но обычно на 10–30% меньше. В сочетании с gzip на сервере это заметно снижает начальный вес страниц с большим объёмом контента.

Да — нажмите «Скачать», чтобы сохранить отформатированный результат как output.html или сжатый — как output.min.html. Файл кодируется в UTF-8, поэтому он одинаково хорошо работает с английским, кириллическим, восточноазиатским текстом и контентом с письмом справа налево.

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

Режим форматирования позволяет выбрать отступ в 2, 4 или 8 пробелов. Выберите ширину, принятую в вашем редакторе или стиле кода, затем скопируйте результат или скачайте его как output.html, чтобы форматирование сразу перенеслось в ваш проект.

Селектор отступа (2, 4 или 8 пробелов) применяется только в режиме форматирования, поскольку минификация по замыслу убирает все пробелы и переносы строк — отступать становится нечего. Переключитесь обратно на форматирование, чтобы ширина отступа снова вступила в силу.

По мере вставки или редактирования инструмент автоматически выполняет структурную проверку и перечисляет все незакрытые, несоответствующие или лишние закрывающие теги прямо под панелью вывода — отдельная кнопка не нужна. Зелёное сообщение «Структурных проблем не найдено» подтверждает, что разметка корректна.

Используйте режим «Форматирование» с отступом в 2 пробела — это самое распространённое соглашение, при котором diff-ы остаются компактными — затем проверьте панель структурных проблем, чтобы убедиться, что не осталось незакрытого тега. После проверки переключитесь в режим «Минификация» перед выкатом в продакшн, чтобы убрать лишние пробелы.

Да — перетащите файл .html, .htm или .xhtml на область загрузки или кликните по ней для выбора, и его содержимое загрузится прямо в поле ввода точно так же, как если бы вы его вставили. Далее «Prettify», «Minify», ширина отступа и структурный проверщик работают одинаково, независимо от того, пришла разметка из файла или из вставки.

Да — как только появляется результат, рядом с панелью вывода и областью основного действия возникает кнопка «Копировать». Нажатие на неё мгновенно копирует текущий результат «Prettify» или «Minify» в буфер обмена (кнопка ненадолго показывает «Copied!» для подтверждения), чтобы вы могли вставить его прямо в свой редактор или комментарий код-ревью без сохранения промежуточного файла .html.