HTML Beautifier — сохраняет комментарии, учитывайте новые самозакрывающиеся теги

Введение

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

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

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

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