Перейти к основному содержимому
Tooletto

Восстановление читаемости HTML

Готовый вариант «Форматировщик HTML»

Превратите минифицированный или плохо отформатированный HTML обратно в читаемый вид. Вставьте одну сжатую строку и получите правильно вложенную разметку с единообразными отступами — включая любой CSS и JavaScript, встроенные в страницу.

  • Файлы никогда не покидают ваше устройство
  • Бесплатно, без регистрации
  • Без водяных знаков
  • Работает офлайн после загрузки
Loading tool…

Как пользоваться: форматировщик html

  1. 1

    Вставьте свой HTML

    Минифицированный, с плохими отступами или написанный вручную — подойдёт любой.

  2. 2

    Выберите отступы

    2 пробела, 4 пробела или табуляция.

  3. 3

    Скопируйте результат

    Или скачайте его как файл .html.

Чтение минифицированной разметки, выпущенной кем-то другим

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

Восстановление структуры страницы, которую вы не писали

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

Часто задаваемые вопросы

Форматирует ли инструмент CSS и JavaScript внутри страницы?

Да. Содержимое внутри `<style>` и `<script>` передаётся парсерам CSS и JavaScript, поэтому вся страница в одном файле форматируется корректно целиком, а не оставляет эти блоки нетронутыми.

Изменит ли форматирование то, как отображается страница?

Почти никогда, но не совсем никогда: HTML считает пробелы значимыми внутри `<pre>`, `<textarea>` и элементов с `white-space: pre`. Они остаются в точности как есть. Инлайновые элементы в редких случаях могут сместиться на один пробел, поэтому форматировщик действует вокруг них осторожно.

Почему инструмент отклоняет мой HTML?

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

Моя разметка куда-то загружается?

Нет. Парсер работает прямо в браузере, поэтому неопубликованные страницы и работа для клиентов остаются на вашем компьютере.