Форматирование HTML кода онлайн
Вставьте минифицированный HTML (например, view-source любого сайта или один из отчётов Next.js/React) — слева, читаемый код с отступами появится справа. Атрибуты, регистр React-полей и содержимое script/style не трогаются, если явно не включить соответствующий режим.
Форматирование HTML без риска сломать вёрстку
Большинство онлайн-форматтеров HTML работают через DOMParser или innerHTML — а это значит, что браузер по пути приводит имена атрибутов к нижнему регистру, переставляет теги и нормализует кавычки. Для обычной верстки это незаметно, но для кода из React/Next.js (camelCase-атрибуты) или инлайн-SVG (регистрозависимые атрибуты вроде viewBox) — это тихая порча кода. Этот инструмент разбирает исходный текст посимвольно и меняет только пробелы между тегами.
Не трогает атрибуты
Кавычки, регистр (charSet, fetchPriority), пустые и булевы атрибуты копируются как в исходнике.
Безопасен для SVG
viewBox, clipPath, linearGradient не приводятся к нижнему регистру, даже если включена такая опция.
Понимает вложенность без DOM
Незакрытые <li>, <p>, <td> закрываются по правилам браузера — без лесенки отступов.
Script/style по желанию
По умолчанию содержимое не трогается; отдельный чекбокс включает отступы в JS/CSS и pretty-print JSON-LD.
Статистика документа
Строки, теги, максимальная глубина вложенности, размер в КБ и число проблемных мест — на одной панели.
Файлы и буфер обмена
Загрузка .html файла или drag-and-drop, копирование результата как HTML, JS-строки или скачивание файлом.
Что инструмент не ломает
Наивное форматирование HTML регулярными выражениями почти всегда спотыкается на одних и тех же местах. Вот что этот инструмент обрабатывает корректно:
| Ситуация |
Что происходит |
> и < внутри значений атрибутов, например title="a > b" |
Атрибут не ломается, тег закрывается на правильном символе |
| Атрибуты без кавычек и в одинарных кавычках |
Копируются как есть, не приводятся к двойным кавычкам |
React/JS-атрибуты: charSet, fetchPriority, imageSrcSet |
Регистр не меняется по умолчанию |
SVG-атрибуты: viewBox, clipPath, linearGradient |
Не приводятся к нижнему регистру, даже если включена опция «нижний регистр» |
</div> внутри строки JS в <script> |
Не считается закрывающим тегом — содержимое script остаётся текстом |
<pre> и <textarea> |
Содержимое и все пробелы внутри не изменяются ни на символ |
| Комментарии, SSI-директивы, условные комментарии IE |
Копируются как есть, включая <!--#include virtual="..." --> |
Незакрытые <li>, <p>, <td>, <option> |
Закрываются по тем же неявным правилам, что использует браузер |
JSON-LD в <script type="application/ld+json"> |
По желанию (чекбокс) красиво форматируется через JSON.parse/stringify |
| Один документ на 30 000+ символов в одной строке |
Форматируется за доли секунды |
Форматирование HTML: сравнение способов
| Способ |
Бесплатно |
Без регистрации |
Не портит React/SVG атрибуты |
Работает офлайн |
Статистика документа |
| Этот инструмент |
Да |
Да |
Да |
Да (кэш) |
Да |
| Онлайн-форматтеры на regex |
Да |
Да |
Нет |
Нет |
Нет |
| Chrome DevTools (pretty-print) |
Да |
Да |
Да |
Да |
Нет |
| Prettier в VS Code |
Да |
Да |
Частично |
Да |
Через расширения |
Данные актуальны на момент публикации. Функциональность сторонних инструментов может меняться.
FAQ по форматированию HTML
Зачем форматировать HTML, если браузеру всё равно?
Браузеру действительно всё равно, но человеку — нет. Минифицированный HTML с view-source любого сайта или из React/Next.js — это одна строка на десятки тысяч символов. Форматирование добавляет отступы и переносы строк, ничего не меняя в самой разметке, чтобы код можно было читать, искать нужный блок и понимать вложенность.
Не сломает ли форматирование вёрстку?
Нет. Инструмент не использует DOMParser и не строит DOM — он посимвольно разбирает исходный текст и меняет только пробелы между тегами. Атрибуты, кавычки, регистр React-атрибутов (charSet, fetchPriority), содержимое script/style и SVG остаются такими, какими были в исходнике.
Работает с версткой из React, Next.js, Vue?
Да. Такие фреймворки генерируют HTML с camelCase-атрибутами (imageSrcSet, fetchPriority) и десятками подряд идущих тегов script. Инструмент не приводит регистр атрибутов к нижнему по умолчанию и не путает вложенные кавычки, поэтому такая разметка форматируется без потерь.
Что будет с содержимым <script> и <style>?
По умолчанию содержимое script и style копируется как есть — только сам тег получает отступ по уровню вложенности. Если включить чекбокс «Script/style», инструмент дополнительно расставит отступы в JS/CSS и красиво отформатирует JSON-LD внутри script type="application/ld+json".
А если в HTML есть ошибки — незакрытые теги?
Инструмент не пытается «починить» разметку, но и не ломается на ней. Незакрытые <li>, <p>, <td>, <option> закрываются по тем же неявным правилам, что использует браузер — без бесконечной лесенки отступов вправо. Лишний закрывающий тег без пары просто печатается на текущем уровне.
Мой код куда-то отправляется?
Нет. Разбор и форматирование происходят локально в браузере на JavaScript. Код не покидает вкладку — можно спокойно вставлять код с закрытых страниц и внутренних инструментов.
