01
Сохраните исходник
Пример и очистка сначала показывают число заменяемых символов. Одно действие отмены восстанавливает и ввод, и результат.
- В примере видны пробелы между словами и переносы внутри pre.
Инструменты HTML
Форматирование HTMLУвидеть вложенность тегов
Автоформатирование через 350 мс; сжатие запускается вручную. Замечания ведут к исходной строке.
Форматирование HTML
Исходный HTML
Результат
HTML остаётся в этой вкладке. Статический просмотр блокирует скрипты и внешние ресурсы.
Вставьте HTML или откройте пример.
Разметка из CMS часто приходит одной длинной строкой. Форматирование HTML раскрывает вложенность структурных тегов, сохраняя пробелы между словами и содержимое чувствительных блоков.
Дерево элементов и замечания возвращают к исходной строке. Это подсказки для поиска проблемы, а не заключение о соответствии всем требованиям стандарта.
Зачем нужно Форматирование HTML
Структура с привязкой к исходнику
Форматирование HTML добавляет отступы между структурными тегами. Комментарии и содержимое pre, textarea, script и style остаются как в исходнике.
Просмотр только после вашего действия
Форматирование HTML создаёт результат, который по запросу открывается в отдельной песочнице. Скрипты, формы и внешние запросы в ней запрещены.
Три проверки перед сохранением
02
Выберите момент запуска
Автоформатирование ждёт 350 мс после ввода. При отключении работает Ctrl/Cmd+Enter; сжатие запускается только вручную.
- Изменение отступа сразу делает старый результат неактуальным и запрещает экспорт.
03
Проверьте место и размер
Нажатие на элемент дерева или сообщение переносит к строке и столбцу исходника. Сравнение байтов показывает только размер.
- Отсутствие замечаний не означает полной проверки стандарта.
Читаемость, сжатие и поиск
Осторожные отступы
Переносы добавляются между структурными тегами без изменения слов в строке и порядка атрибутов.
Явное сжатие
Компактный результат строится из исходника; комментарии и встроенный код остаются, а байты UTF-8 сравниваются.
Дерево с номерами строк
Показана иерархия HTML5-парсера, в том числе узлы, добавленные браузером без записи в исходнике.
Изолированный статический просмотр
Доступен только для актуального результата и блокирует активные элементы и внешние ресурсы.
Границы проверки структуры
- Не полный валидатор
- Форматирование HTML показывает ошибки разбора с позициями и вероятно незакрытые теги. Все модели содержимого и правила доступности оно не проверяет.
- Пробелы могут влиять на страницу
- Промежутки внутри текста и защищённые блоки сохраняются, но CSS white-space может сделать значимыми и пробелы между структурными тегами.
- Без исправления шаблонов
- Vue, JSX и Liquid не разбираются как отдельные языки. Узлы, восстановленные браузером, не дописываются в экспортируемый код.
- Без дополнительных преобразований
- Нет загрузки по URL, пакетной обработки, удаления комментариев, перестановки атрибутов или сжатия встроенных CSS и JavaScript.
Вопросы про Форматирование HTML
Может ли форматирование изменить отображение страницы?
Да, если CSS делает пробелы видимыми. Промежутки в строке и защищённые блоки сохраняются, но результат стоит проверить на настоящей странице.
Исправляет ли форматтер ошибки в HTML-разметке?
Нет. Он указывает некоторые ошибки разбора и возможные незакрытые теги, но не меняет исходник для их исправления.
Чем форматирование отличается от минификации HTML?
Форматирование раскрывает вложенность для чтения, а минификация сокращает структурные пробелы. Исходный код не перезаписывается.
Сохраняется ли содержимое script и style?
Да. Содержимое остаётся дословным; встроенные JavaScript и CSS здесь не сжимаются.
Отправляется ли HTML-код на сервер?
Нет. Обработка идёт в этой вкладке. Статический просмотр открывается по выбору и не может загружать внешние ресурсы.
Остался вопрос?
Попробуйте Форматирование HTML
Вставьте настоящий фрагмент, изучите подозрительные теги и выгружайте только актуальный результат.