Как работает форматирование HTML
Форматтер читает разметку тег за тегом, отслеживает глубину вложенности каждого элемента и выводит её с единообразными отступами. Он никогда не меняет то, что рендерит страница — только то, как оформлен исходный код.
- Разбор тегов. Библиотека сканирует входные данные в поток токенов: открывающие теги, закрывающие теги, текстовое содержимое, комментарии и содержимое блоков script и style. Значения атрибутов в кавычках и тела элементов pre и textarea обрабатываются как единые единицы, поэтому пробелы внутри них остаются нетронутыми.
- Отслеживание вложенности. Проходя по потоку токенов, форматтер поддерживает текущий уровень отступа. Каждый открывающий тег, который не является самозакрывающимся, увеличивает уровень на один шаг; каждый соответствующий закрывающий тег уменьшает его обратно. Эта глубина определяет, сколько единиц отступа стоит перед каждой возвращаемой строкой.
- Применение настроек. Ваш выбор отступа — 2 пробела, 4 пробела или табуляция — задаёт ширину одного уровня. Значение переноса на колонке разбивает длинные строки атрибутов или текста при достижении выбранной колонки. Лимит пустых строк сворачивает длинные серии пустых строк до заданного предела.
- Вывод разметки. Наконец форматтер выводит теги обратно с вычисленными отступами и переносами строк. Если вы включили встроенное форматирование, содержимое каждого блока style прогоняется через CSS-форматтер, а каждого блока script — через JS-форматтер, так что встроенный код выравнивается по окружающей разметке.
Зачем форматировать HTML
- Читать минифицированные страницы. Продакшн-HTML поставляется без переносов строк — для экономии байтов. Форматирование восстанавливает структуру, чтобы можно было найти нужный раздел, обнаружить пропущенный закрывающий тег и разобраться, как документ реально вложен.
- Приводить в порядок непоследовательные шаблоны. Разметка, которую редактировали несколько человек, постепенно приобретает смешанные отступы и расстановку тегов. Один проход через форматтер нормализует весь файл, так что следующий коммит показывает внесённые изменения, а не стену переформатированных пробелов.
- Не нагружает страницу. Большинство онлайн-форматтеров загружают всю библиотеку при открытии страницы. Этот загружает js-beautify только когда вы нажимаете «Форматировать» или включаете живой режим, поэтому открытие стоит несколько килобайт вместо нескольких сотен, а начальный рендеринг остаётся быстрым.
- Ничего не покидает браузер. Всё работает на вашем устройстве. Разметка никогда не загружается на сервер — это важно, когда страница принадлежит клиенту, содержит внутренние URL или подпадает под соглашение о конфиденциальности.
Типичные применения
Форматирование HTML используется всякий раз, когда нужно прочитать разметку, написанную не для чтения.
- Проверка живой страницы: вставьте минифицированный исходник из «Просмотра кода», чтобы найти разметку за ошибкой вёрстки, которую не воспроизвести локально.
- Очистка CMS-вывода: переформатируйте шаблон, экспортированный конструктором страниц в одну строку, перед его коммитом в репозиторий.
- Аудит доступности и SEO: разверните документ, чтобы проверить порядок заголовков, структуру ориентиров и атрибуты alt по реальной DOM.
Практический пример
Возьмём минифицированный сниппет: <div><p>hi</p><span>x</span></div>. Вставьте его выше с отступом 2 пробела, затем нажмите «Форматировать». Вы получите читаемый блок: <div> на отдельной строке, <p>hi</p> и <span>x</span> с отступом на один уровень ниже, и закрывающий </div> выровнен под ним. Переключите отступ на «Табуляция» — и каждый уровень сместится с двух пробелов на символ табуляции. Добавьте блок <style>a{color:red}</style>, включите «Также форматировать встроенные CSS и JS» — и правило развернётся на отдельные строки с отступом вместо одной строки.
FAQ
Это работает в моём браузере?
Да. Библиотека js-beautify загружается при первом нажатии «Форматировать» или включении живого режима, а затем кэшируется. Разметка никогда не покидает страницу — нет серверного запроса и нет загрузки данных.
Изменит ли форматирование отображение страницы?
Нет. Форматтер только добавляет и убирает пробелы и переносы строк между тегами. Браузер игнорирует эти пробелы при построении страницы, поэтому рендерируемый результат идентичен. Единственное, на что стоит обратить внимание — пробелозависимое содержимое внутри pre, textarea или строчных элементов, которое форматтер намеренно не трогает.
Что делает переключатель встроенных CSS и JS?
Когда он выключен, содержимое блоков style и script остаётся в точности таким, каким вы его вставили. Включите его — и CSS внутри каждого блока style прогонится через CSS-форматтер, а JavaScript внутри каждого блока script — через JS-форматтер, так что встроенный код выравнивается по окружающей разметке.
Что делает параметр «Перенос на колонке»?
Он задаёт длину строки, при которой тег с многочисленными атрибутами или длинный текстовый фрагмент переносятся на несколько строк. Установите 0, чтобы каждый элемент оставался на одной строке независимо от длины. Установите 80 или 120 — и форматтер будет переносить всё, что выходит за пределы этой колонки, делая широкие элементы читаемыми в узком редакторе.
Браузерное форматирование HTML даёт вам читаемую разметку без шага сборки и без загрузки данных. Вставьте минифицированную или небрежную страницу, выберите отступ и ширину переноса, решите, нужно ли переформатировать встроенные CSS и JS, затем скопируйте или скачайте результат. Ничего не покидает ваше устройство, аккаунт не нужен, а библиотека загружается только по запросу — так что открытие этой страницы стоит несколько килобайт, а не мегабайт.