Форматирование HTML с сохранением ваших комментариев

Введение

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

Как инструмент форматирует ваш код

Если вставить HTML и нажать «Форматировать», код будет перестроен с отступом в два пробела, по одному уровню вложенности на тег, так что сразу видно, какие элементы находятся внутри каких. О том, как инструмент обходится с реальной разметкой, стоит знать несколько вещей:

• Комментарии сохраняются, а не удаляются. HTML-комментарии, в том числе условные комментарии и блоки CDATA, переносятся без изменений — это удобно, если в коде есть указание авторства, заметки TODO или лицензионный комментарий, который нужно сохранить.
• Блоки <script> и <style> переставляются, но не переписываются. Их отступ подгоняется под то место, которое они занимают в окружающем HTML, а вот JavaScript или CSS внутри них отдельно не переформатируется. Если код внутри блока скрипта или стиля был запутанным, таким он и останется — в порядок приводится только его положение относительно окружающей разметки. Для самого содержимого используйте JavaScript Beautifier или CSS Beautifier, если его тоже нужно отформатировать.

Что стоит знать перед использованием

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

• Некоторые самозакрывающиеся элементы HTML5 не распознаются как самозакрывающиеся. Список тегов, которым, по мнению инструмента, не нужен закрывающий тег, если сравнить его со списком пустых элементов в действующей спецификации HTML, не включает несколько более новых — а именно <source> (используется внутри <video>, <audio> и <picture>), <track> (внутри <video> для субтитров) и <col> (внутри <colgroup> в таблицах). Если такие теги записаны в вашем HTML обычным образом — без явной завершающей косой черты /> —, всё, что идёт после них, может получить лишний уровень отступа: форматировщик продолжает ждать закрывающий тег, которого уже не будет. Запись с явной косой чертой (<source />) снимает эту проблему.
• Он не чинит сломанный HTML. Если какой-то тег в исходном коде не закрыт или теги не соответствуют друг другу, инструмент переформатирует ту структуру, которую нашёл, и не упадёт с ошибкой, но и недостающий закрывающий тег не подставит, и саму причину не устранит. Чего не хватало на входе, того не будет хватать и на выходе — это форматировщик, а не валидатор.
• Строчные теги посреди предложения могут оказаться на отдельной строке. Теги вроде <strong>, <em> или <a> внутри абзаца сплошного текста могут отделиться от соседних слов, потому что этот инструмент не относит их к тем, что нужно «оставлять в строке», как делают некоторые другие форматировщики. На отображение HTML в браузере это не влияет — пробелы между тегами всё равно схлопываются —, но имейте это в виду, если форматируете текстовый контент с большим количеством строчных тегов оформления.

Ничто из этого не меняет того, что HTML делает при отображении в браузере — речь только о том, как код выглядит, когда его читает человек, а не о том, как показывается страница.

Когда этот инструмент подходит лучше всего

• Чтение HTML настоящей страницы, чтобы на нём учиться. Исходный код сайта или его разбор в инструментах разработчика часто показывает сжатую или автоматически сгенерированную разметку почти без структуры — после форматирования становится возможным по-настоящему изучить, как собрана страница: это полноценный навык цифровой грамотности, а не только наведение порядка в собственном коде.
• Проверка HTML-работы ученика. Код, который переносили между редакторами или выгружали из конструктора страниц, иногда теряет исходное форматирование; если привести его в порядок перед чтением, проверка и обратная связь пойдут быстрее.
• Разбор разметки, которая отображается неправильно. В плотном неотформатированном HTML труднее заметить пропущенный или стоящий не на месте тег — после форматирования настоящая структурная ошибка обычно бросается в глаза, но помните, что по-настоящему сломанный тег инструмент за вас не исправит.

Если в вашем HTML много тегов <source>, <track> или <col> без явной косой черты, ещё раз посмотрите на отступы после них в результате — см. ограничение выше. Для обычной разметки страницы это быстрый способ получить читаемую структуру, не устанавливая ни редактор, ни расширение.

Пример

Ученику нужно изучить главную страницу настоящего сайта и описать, как в HTML устроена её основная навигация. В исходном коде страницы всё оказывается одной плотной минифицированной строкой, вообще без пробелов. Если вставить её сюда и отформатировать, получится аккуратно выстроенная по отступам разметка, на которой наконец видно, какие элементы <nav>, <ul> и <li> вложены друг в друга и как навигация связана с остальной страницей — именно такое структурное чтение по одной неотформатированной строке даётся куда тяжелее.

Частые вопросы

Меняется ли от форматирования то, как отображается HTML?

Нет. Меняются только пробелы и переносы строк — теги, атрибуты и содержимое остаются прежними, поэтому в браузере страница выглядит одинаково в обоих случаях.

Удаляются ли HTML-комментарии?

Нет — комментарии, в том числе условные, сохраняются в результате без изменений.

Будет ли отформатирован CSS или JavaScript внутри моего HTML?

Отдельно — нет. Блоки <script> и <style> переставляются так, чтобы совпадать с отступами окружающего HTML, но код внутри них сам по себе не переформатируется. Для него используйте JavaScript Beautifier или CSS Beautifier, если ему нужно собственное форматирование.

Исправит ли он сломанные или незакрытые теги?

Нет. Инструмент форматирует ту структуру, которую нашёл; он не проверяет HTML на корректность и не добавляет пропущенные закрывающие теги.

Правильно ли он обрабатывает теги <source>, <track> и <col>?

Не всегда, если они записаны без явной завершающей косой черты — содержимое после них может получить лишний уровень отступа. Запись вида <source /> это предотвращает. См. раздел «Что стоит знать перед использованием» выше.

Сохраняется ли мой код где-нибудь?

Нет. Вставленный HTML обрабатывается, чтобы выдать отформатированный результат, и после этого не хранится; фиксируется только сам факт использования инструмента, но не сам код.

Какие связанные инструменты можно использовать?

Используйте JavaScript Beautifier или CSS Beautifier, чтобы отформатировать JavaScript или CSS внутри вашего HTML, либо HTML Minifier, чтобы снова сжать готовый HTML для боевой версии сайта.