Форматтер HTML

Как сделать HTML-код читаемым

Вложенные элементы HTML выстроены в аккуратную структуру с отступами

Форматтер расставляет переносы строк и отступы между вложенными блоками HTML. Удобная отправная точка: два пробела на каждый уровень вложенности. Раздел, список и его пункты становятся видны отдельно, а текст, названия тегов и значения атрибутов остаются прежними. Это помогает читать код страницы, искать границу блока и проверять чужую правку.

HTML описывает структуру документа: где заголовок, абзац, ссылка или изображение. Тег открывает элемент, например <p>, а парный закрывающий тег </p> завершает его. Когда один элемент находится внутри другого, появляется вложенность. Отступ показывает её человеку: браузер определяет границы по разметке, а не по количеству пробелов слева.

Один длинный ряд тегов вполне может быть рабочей страницей. Но искать в нём лишний закрывающий элемент приходится почти как конец скотча: понятно, что он где-то есть, только не видно где. Форматирование разделяет структуру на строки. Оно полезно перед ручным изменением небольшого шаблона, публикацией учебного примера или обсуждением фрагмента с разработчиком.

Что меняется при форматировании

Выбор между двумя и четырьмя пробелами определяет ширину отступа. На третьем вложенном уровне это соответственно 6 и 12 пробелов. Четыре пробела заметнее разделяют уровни; два оставляют больше места длинным атрибутам на узком экране. Если код попадёт в существующий проект, берите его принятый стиль, чтобы одна небольшая правка не выглядела как переписывание всей страницы.

Инструмент переносит известные блочные элементы: разделы, абзацы, заголовки, списки, строки таблицы. Внутри текстового абзаца он сохраняет исходную запись. Например, фраза со ссылкой или жирным выделением остаётся в одной строке, даже если внешние разделы получили новые отступы. Такое поведение защищает пробелы между словами.

Сохраняются регистр тегов, порядок атрибутов, одинарные и двойные кавычки, комментарии и записи HTML-сущностей. Сущность обозначает символ специальной последовательностью, например   для неразрывного пробела. Форматтер не заменяет эту запись обычным пробелом и не переставляет атрибуты по алфавиту. Для сравнения исходника и результата можно открыть сравнение текстов.

Примеры работы с разметкой

Список покупок внутри раздела. В исходнике <section><ul><li>Хлеб</li><li>Молоко</li></ul></section> всё занимает одну строку. При шаге в 2 пробела результат занимает 6 строк: внешние теги раздела без отступа, теги списка с двумя пробелами, каждый пункт с четырьмя. Теперь видно, куда добавить третий продукт, не закрыв список раньше времени.

Цена с выделенным числом. Фрагмент <p>Цена <strong>100</strong> ₽</p> остаётся без изменений. Пробел перед числом и пробел перед знаком рубля входят в текст. Если бездумно разбить все теги на отдельные строки, при некоторых стилях получится другой интервал. Сохранённая строка позволяет перенести цену в шаблон с тем же текстовым окружением.

Пример кода в учебной статье. Внутри <pre> записаны 2 строки: перед первой 2 пробела, перед второй 1. После форматирования именно эти внутренние отступы сохраняются. Это важно для листинга: в Python пробелы участвуют в синтаксисе, а в нарисованной символами схеме они задают положение объектов. Наводить красоту снаружи не повод чинить содержимое примера.

Подсказка со знаком больше. В записи <p title="Скидка > 10%">Акция</p> атрибут title содержит собственный знак >. Он находится внутри кавычек и не завершает открывающий тег. Результат сохраняет атрибут и слово «Акция» буквально. Разделение исходника простым поиском каждого знака > здесь было бы ошибкой.

Забытый закрывающий тег. Строка <div><p>Привет</div> получает сообщение с просьбой добавить </p>. После исправления на <div><p>Привет</p></div> результат занимает 3 строки, а абзац отступает на 2 пробела. HTML допускает пропуск некоторых закрывающих тегов, но этот инструмент требует явные границы, чтобы не принимать решение за автора.

Картинка без закрывающего тега. Фрагмент <img src="photo.jpg" alt="Утренний парк"> остаётся прежним и проходит обработку. Элемент img относится к пустым: содержимое и закрывающий тег ему не нужны. Так же устроены br, input и meta. Добавлять к изображению </img> ради симметрии не следует.

Почему некоторые строки остаются длинными

Пробел в HTML может быть частью содержимого. Между соседними строчными элементами <span>А</span><span>Б</span> пробела нет. Автоматический перенос между ними мог бы создать видимый промежуток. Поэтому такие группы сохраняются целиком. Если строка не поместилась, её можно прокрутить внутри результата: ширина всей страницы от этого не увеличивается.

Полностью сохраняется содержимое pre, textarea, script и style. У каждого своя причина: готовые отступы, введённый пользователем текст, JavaScript или CSS. Форматтер HTML не форматирует одновременно другие языки. Он также оставляет без перестройки пользовательские элементы, SVG, MathML и содержимое template, где слишком легко изменить смысл, ориентируясь только на привычные теги.

Внешние CSS-правила инструмент не загружает. Если на сайте для обычного раздела задано white-space: pre, новые отступы могут стать видимыми. А изменение display способно сделать привычный блок строчным элементом. Поэтому после форматирования шаблона проверьте страницу с её настоящими стилями. Форматтер сохраняет исходные текстовые фрагменты, но не обещает одинаковый вид при любой таблице стилей.

Как читать сообщение об ошибке

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

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

Это не полная проверка качества HTML. Успешное форматирование не доказывает, что все ссылки ведут куда нужно, изображения имеют осмысленные описания, заголовки идут в правильном порядке, а форма доступна с клавиатуры. Эти свойства проверяют отдельно в контексте страницы. Для визуального редактирования содержимого удобнее HTML-редактор.

Обработка и сохранение результата

Код обрабатывается в браузере и выводится как текст. Вставленные скрипты не запускаются, изображения и стили из исходника не загружаются. Поле с кодом не записывается в адрес страницы или локальное хранилище. После обычной перезагрузки возвращается учебный пример; выбранный размер отступа сохраняется на время сеанса.

Кнопка скачивания создаёт файл formatted.html в UTF-8. Открытый как веб-страница, такой файл уже способен выполнять содержащиеся в нём скрипты. Форматирование не очищает опасные атрибуты и не превращает неизвестный HTML в безопасный документ. Если нужно лишь прочитать чужой код, открывайте скачанный файл в текстовом редакторе.

За один раз можно обработать до 200 000 символов исходника, до 100 уровней вложенности и до 20 000 узлов. Предел результата составляет 1 000 000 символов: отступы в глубокой структуре заметно увеличивают размер. Для большого автоматически созданного документа лучше взять форматтер в редакторе проекта и проверить изменения средствами контроля версий.

Вопросы о форматировании HTML

При переносе кода между редактором, сайтом и файлом различаются требования к пробелам, синтаксису и размеру. Эти различия помогают выбрать подходящий способ обработки.

Подходит ли форматтер для JSX и компонентов React?

Нет. JSX допускает выражения JavaScript в фигурных скобках и собственные правила записи атрибутов. Здесь нужен обычный HTML. Компоненты React форматируйте инструментом, который явно поддерживает JSX или TSX.

Можно ли вставить PHP, Twig или другой шаблон?

Шаблон сначала должен превратиться в готовый HTML. Условия, циклы и специальные разделители серверного языка могут выглядеть для HTML-парсера как ошибочная разметка или текст. Чтобы сохранить сам шаблон, используйте форматтер соответствующего языка в проекте.

Ускорит ли форматирование загрузку сайта?

Само по себе нет. Отступы обычно увеличивают текстовый файл. Для передачи используют сжатие на сервере и при необходимости отдельную минификацию. Читаемую версию удобно хранить и редактировать, а способ доставки выбирать при сборке сайта.

Почему браузер показывает код, который форматтер отклоняет?

Браузер старается показать даже неполный документ и восстанавливает структуру по правилам HTML. Форматтер придерживается более строгого режима: просит явно закрывать непустые элементы и не переписывает фрагмент, если парсер переставил его части. Это ограничение инструмента, а не утверждение, что любая сокращённая запись запрещена стандартом.

Нужно ли добавлять doctype к небольшому фрагменту?

Для обработки отдельного абзаца, списка или раздела doctype не нужен. В полном документе обычно используют <!doctype html> в самом начале, чтобы браузер выбрал стандартный режим отображения. Форматтер сохраняет декларацию, но не добавляет её автоматически.

200 000 символов равны 200 килобайтам?

Нет. Ограничение считается по длине строки JavaScript в кодовых единицах UTF-16. Кириллица в UTF-8 обычно занимает два байта на букву, а некоторые символы, например многие эмодзи, занимают две кодовые единицы UTF-16. Поэтому размер скачанного файла в байтах может отличаться от длины исходника.

Можно ли заменить все пробелы между тегами на переносы строк?

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

Есть что добавить?

Напишите своё мнение, комментарий или предложение.