Инструмент форматирования HTML

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

Форматировщик HTML следует алгоритму построения дерева WHATWG HTML Standard. Байты декодируются (обычно UTF-8 по meta charset или BOM), токенизатор проходит через состояния data, RCDATA, RAWTEXT, script-data и несколько состояний атрибутов, определённых в разделе 13.2.5, а этап построения дерева формирует DOM с использованием конечного автомата режимов вставки (initial, before html, in head, in body, in table, in select и так далее). Парсер по конструкции прощающий: незакрытый <p> автоматически закрывается при встрече блочного элемента, блуждающий </tr> игнорируется, а неправильно расположенный <table> получает foster-родителя. Парсеры уровня браузера предоставляют это через new DOMParser().parseFromString(src, 'text/html'); инструменты на стороне Node используют parse5 (эталонная реализация WHATWG), htmlparser2 или cheerio. Повторный вывод обходит полученное дерево и сериализует по категориям элементов. Пустые элементы — area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr — никогда не получают закрывающий тег в HTML5 (самозакрывающийся XHTML-формат /> допускается, но не обязателен). Блочные контейнеры (div, section, article, header, footer, nav, main, ul, ol, li, table) получают собственную строку с отступом в depth*indent пробелов; строчное/инлайн-содержимое (span, a, strong, em, code) остаётся в строке, поскольку CSS white-space: normal сводит последовательности пробелов к одному символу. Два типа элементов должны сохраняться дословно: <pre> и <textarea> несут семантику white-space: pre, а их начальный перенос строки поглощается парсером; тела <script> и <style> являются RAWTEXT, поэтому переиндентация их содержимого изменила бы поведение во время выполнения — их обычно делегируют подформатировщику JS или CSS и встраивают обратно. Сериализация атрибутов нормализует кавычки (одинарные vs двойные) и перекодирует встроенные разделители через именованные ссылки &amp;, &lt;, &gt;, &quot; и числовую &#39;. Порядок атрибутов не важен в DOM, поэтому форматировщики обычно применяют стабильный порядок (id, class, затем по алфавиту). Перенос строк включается при превышении настроенного printWidth: атрибуты разбиваются по одному на строку, а закрывающий > либо находится на отдельной строке (prettier-plugin-html bracketSameLine: false), либо прикреплён к последнему атрибуту. Минификация обращает процесс вспять — пробелы между блочными тегами удаляются, комментарии убираются, кроме условных IE <!--[if, а кавычки опускаются для атрибутов, чьё значение соответствует [A-Za-z0-9._-]+. Обе операции имеют сложность O(n) по длине входных данных.

• Парсер: построение дерева WHATWG HTML (раздел 13) через DOMParser('text/html') в браузере, parse5/htmlparser2/cheerio на Node; конечный автомат режимов вставки обрабатывает отсутствующие/неправильно расположенные теги и foster-parenting
• Пустые элементы (без закрывающего тега): area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr — 14 элементов по HTML Living Standard. Самозакрывающийся XHTML-формат /> допускается, но избыточен
• Элементы с сохранением пробелов: <pre> и <textarea> несут CSS white-space: pre и поглощают один начальный перенос строки; их внутренние байты никогда не переиндентируются, иначе видимый вывод изменится
• Контексты RAWTEXT: тела <script> и <style> не являются HTML — они делегируются подформатировщикам JS/CSS (или остаются без изменений). Переиндентация сырого текста внутри regex или строкового литерала сломает семантику выполнения
• Нормализация атрибутов: выбирается стиль кавычек (одинарные/двойные), встроенные разделители перекодируются пятью именованными ссылками (&amp;, &lt;, &gt;, &quot;, &#39;), применяется стабильный порядок (id, class, затем по алфавиту), так как порядок в DOM не важен
• Перенос строк при превышении printWidth (обычно 80/100/120): атрибуты разбиваются по одному на строку, закрывающий > либо на отдельной строке, либо прикреплён к последнему атрибуту — аналогично опции bracketSameLine в prettier-plugin-html
• Минификация: сворачивает межтеговые пробелы, удаляет комментарии (сохраняя условные <!--[if IE]>), убирает необязательные закрывающие теги (</li>, </p> перед следующим sibling) и убирает кавычки для атрибутов, соответствующих [A-Za-z0-9._-]+; round-trip имеет сложность O(n)