Что делает форматирование
Расставляет переносы строк и отступы по уровню вложенности — то, что теряется при минификации или при сборке страницы на бэкенде. В HTML каждый вложенный тег сдвигается на уровень глубже, в CSS каждое правило и объявление получает свою строку с отступом. Работает с HTML и CSS — тип определяется автоматически по содержимому поля.
Что не меняется
Форматирование только расставляет пробелы и переносы, не переписывает сам код. Содержимое <pre>, <textarea> и <script> копируется в результат byte-в-byte, без единого добавленного пробела — для <textarea> это особенно важно, там пробелы и переносы строк — часть значения поля, а не оформление. Инлайновый <style> при этом форматируется как обычный CSS. Строки, комментарии и содержимое url(...) (включая base64-картинки) копируются как есть — внутрь них ничего не добавляется и ничего не удаляется.
Как определяется тип
Инструмент смотрит на характерные признаки: теги вроде <div> или <!DOCTYPE> — это HTML, правила с фигурными скобками и объявлениями через двоеточие и точку с запятой (color: red;) — это CSS. Поддерживаются только HTML и CSS: JavaScript сюда не входит — переставлять переносы строк в JS небезопасно (можно случайно поменять поведение кода), это отдельная и более осторожная задача.
Ограничения
Рассчитан на валидный код с закрытыми тегами. Если в исходном HTML намеренно опущены необязательные закрывающие теги (например, <li> или <p> без пары) — отступы после них могут поехать, инструмент не реализует полный разбор HTML5 с неявным закрытием тегов, только базовую вложенность по явным тегам.
Форматирование HTML и CSS онлайн — бесплатно
Пригодится, когда код пришёл сжатым (после сборки, из чужого экспорта, от другого инструмента) и его нужно почитать или доработать руками. Ничего никуда не отправляется — всё считается в браузере.