Форматировщик и минификатор HTML — бесплатно
Форматируйте или минифицируйте HTML с правильными отступами вложенности. Сохраняет содержимое внутри блоков <pre>, <script>, <style>.
Перетащите файл сюда или нажмите для выбора
HTML, HTM · обрабатывается на вашем устройстве
или нажмите Ctrl+V, чтобы вставить из буфера обмена
Результат появится здесь…Частые применения
- Отладка HTML, отрисованного на сервереПросмотрите сырой вывод HTML с вашего сервера (PHP, Rails, Django, Node) в читаемом отступированном формате.
- Форматирование шаблонов электронной почты HTMLHTML электронной почты многословен (таблицы, встроенные стили). Отформатируйте, чтобы сделать его редактируемым и поддерживаемым.
- Форматирование статических HTML страницСтатические файлы HTML, отредактированные вручную, выигрывают от последовательного форматирования для совместного редактирования.
- Очистка HTML, экспортированного из CMSWordPress, Wix, Squarespace экспортируют HTML с множеством артефактов. Отформатируйте, чтобы сделать его редактируемым.
- Минификация HTML для производстваСократите размер файла HTML для более быстрой загрузки страницы, удаляя пробелы и ненужные символы.
Как это работает
Этот инструмент форматирует или сжимает HTML с помощью написанного вручную токенизатора, учитывающего теги, встроенного прямо в страницу — без сторонней библиотеки форматирования, без обращения к серверу. Каждый символ вашей разметки обрабатывается локально в браузере в момент, когда вы его вводите или вставляете.
- 1Токенизатор сканирует разметкуПользовательский посимвольный сканер проходит по строке HTML, определяя комментарии, декларации DOCTYPE, открывающие теги, закрывающие теги, самозакрывающиеся пустые элементы (br, img, input и т.д.) и узлы необработанного текста. Специальный помощник отслеживает значения атрибутов в кавычках, так что символы вроде > внутри атрибута (например, value="a>b") никогда не вызывают преждевременное разделение тега.
- 2Глубина отступа отслеживается для каждого тегаВ режиме форматирования токенизатор ведёт счётчик глубины. Открывающие теги блочного уровня увеличивают глубину; закрывающие теги уменьшают её перед записью. Инлайн-элементы (span, a, strong, em и т.д.) остаются на одной строке со своим содержимым, а не переносятся на отдельную строку с отступом. Содержимое тегов pre, script, style и textarea выводится дословно, чтобы не исказить код, чувствительный к пробелам, или исполняемый код.
- 3Минификатор безопасно сворачивает пробелыВ режиме минификации содержимое блоков pre, script, style и textarea заменяется на пронумерованные метки-заполнители перед началом сворачивания пробелов. HTML-комментарии удаляются, а серии пробелов между тегами удаляются — за исключением случаев между соседними инлайн-элементами, где сохраняется одиночный пробел, чтобы слова не слипались. Затем метки-заполнители восстанавливаются в их оригинальное содержимое.
- 4Вывод отображается и опционально сохраняетсяОтформатированный или минифицированный результат появляется вживую в панели вывода вместе с процентом изменения размера. Вы можете скопировать его в буфер обмена или скачать как файл .html, всё без выхода из браузера.
Похожие инструменты
Форматировщик CSS
Форматируйте минифицированный CSS с единообразными отступами или минифицируйте его. Дополнительная сортировка свойств по алфавиту для предсказуемых различий.
Минификатор и форматировщик CSS
Минифицируйте CSS для уменьшения размера файла или форматируйте минифицированный CSS для читаемости. Мгновенно, в браузере.
Форматировщик и валидатор XML
Форматируйте и валидируйте XML с помощью нативного DOM-парсера браузера. Включает минифицированный вывод для использования в продакшене.