Форматирование HTML онлайн
Превратите сжатый исходный код страницы в читаемую разметку. Отступы отражают вложенность тегов, атрибуты удобно расположены, а встроенные скрипты и стили форматируются вместе с документом.
Почему исходный код страницы выглядит так
HTML-минификаторы сокращают пробелы между тегами, удаляют комментарии, необязательные закрывающие теги и кавычки вокруг значений атрибутов, которым они не нужны. Серверные шаблоны дополнительно усложняют картину: страница, собранная из десятков фрагментов, приходит единым потоком, в котором не видны границы исходных файлов. В исходном коде почти любого рабочего сайта найдутся несколько огромных строк, где для поиска закрывающего тега раздела приходится буквально считать угловые скобки.
Главное: увидеть структуру документа
HTML представляет собой дерево, но в плоском виде это дерево трудно читать. Отступы по глубине вложенности сразу показывают устройство документа: где заканчивается шапка, какой контейнер охватывает основной контент, насколько глубоко находится компонент и у какого элемента нет закрывающего тега. Поэтому отформатированный исходный код полезен для проверки порядка заголовков, изучения разметки, созданной фреймворком, или понимания того, как устроен интересующий вас раздел другого сайта.
Встроенные скрипты и стили тоже форматируются
Настоящая страница редко состоит только из разметки. Фрагменты аналитики, структурированные данные JSON-LD, объекты конфигурации и критический CSS часто встроены прямо в документ, и минификатор сжимает их вместе с остальным кодом. Форматтер обрабатывает каждый встроенный блок подходящим анализатором. Тег script с минифицированным JavaScript превращается в читаемый JavaScript, а тег style превращается в читаемый CSS, сохраняя своё место внутри документа с правильными отступами.
Учитываются теги, чувствительные к пробелам
Расстановка отступов меняет пробелы между тегами, а иногда эти пробелы значимы. Форматтер учитывает это: содержимое pre и textarea остаётся без изменений, а строчные элементы не разбиваются так, чтобы добавить или убрать видимые пробелы вокруг текста. Документ становится удобным для чтения с учётом того, как браузер отображает его содержимое. Это особенно важно для фрагментов текста, где случайный пробел может повлиять на результат.
Частые вопросы
Можно ли вставить исходный код целой страницы?
Да. Скопируйте исходный код в браузере через view-source или сохраните страницу и откройте файл. Будет отформатирован весь документ, включая head, body, встроенные скрипты и структурированные данные.
Изменится ли отображение страницы после форматирования?
Оно не должно измениться. Содержимое чувствительных к пробелам элементов pre и textarea сохраняется, а строчное содержимое обрабатывается аккуратно. Тем не менее лучше форматировать копию для чтения, а перед публикацией результата обязательно проверить страницу.
Поддерживаются ли шаблоны Twig или Blade?
Частично. Обычная разметка форматируется нормально, но собственный синтаксис шаблонных тегов может вызвать ошибку HTML-анализатора. Инструмент предназначен прежде всего для HTML, который получает браузер, а не для шаблона, из которого он был создан.