Форматирование и минификация HTML — форматируйте HTML онлайн бесплатно

Вставьте любой 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, чтобы форматирование сразу перенеслось в ваш проект.

The indent selector (2, 4 or 8 spaces) only applies in Prettify mode, since Minify strips all whitespace and line breaks by design — there is nothing left to indent. Switch back to Prettify to see the indent width take effect again.

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

Use Prettify mode with 2-space indent — it's the most common convention and keeps diffs compact — then check the structural-issues panel to confirm they haven't left an unclosed tag. Once reviewed, switch to Minify mode before shipping to production to strip the extra whitespace back out.

Yes — drag an .html, .htm or .xhtml file onto the upload area, or click it to browse, and its contents load straight into the input box exactly as if you'd pasted them. From there, Prettify, Minify, indent width and the structural checker all work identically whether the markup came from a file or a paste.

Yes — once there's output, a Copy button appears next to the output panel and the primary action area. Clicking it copies the current Prettify or Minify result to your clipboard instantly (it briefly shows 'Copied!' for confirmation), so you can paste directly into your editor or a code review comment without saving an intermediate .html file.