HTML Prettify and Minify — форматировать HTML онлайн бесплатно

Украсивьте неаккуратный HTML с правильным отступом или миниминифицируйте до одной строки. Выбросьте .html файл или вставьте, затем скопируйте или скачайте очищенную разметку.

Входный HTML

или отбросить .html файл

Форматированный выход

О HTML Prettify

Работает на js-beautify, работает полностью в вашем браузере. Режим Prettify переформатирует теги на отдельные строки с единообразным отступом; Режим минификации удаляет комментарии и сворачивает пробелы для минимальной полезной нагрузки.

Продолжайте улучшать свои изображения

Выведите редактирование фотографий на новый уровень с помощью этих популярных инструментов

Frequently Asked Questions

Вставьте любой HTML — даже однострочный минифицированный вывод из конвейера сборки — и инструмент переформатирует его с правильным отступом, по одному тегу на строку и согласованным пробелом. Выберите отступ на 2, 4 или 8 пробелов. Результат готов к размещению в вашем редакторе или в комментарий для обзора кода.

usage

Prettify расширяет HTML для удобства читаемости: каждый тег находится на отдельной строке, вложенные дочерние линии отступают, пустые строки сохраняются между разделами. Minify удаляет комментарии, сворачивает пробелы и убирает разрывы строк, чтобы файл отправлялся за меньшее количество байт. Используйте Prettify для редактирования и обзора, minify для производственного развертывания.

features

Нет — js-beautify (движок под капотом) обнажает блоки скриптов и стилей и форматирует их содержимое с соответствующими правилами JS или CSS, чтобы встроенные скрипты оставались действительными, а таблицы стилей — читаемыми. Самозакрывающиеся теги, void-элементы и атрибуты с пространственными именами (svg:xmlns, xlink:href) обрабатываются корректно.

technical

Он хорошо справляется с простыми HTML и шаблонами, похожими на HTML, но чистый JSX (выражения с завитыми брекетами, фрагменты, заглавные компонентные теги) парсируется как HTML и может иметь незначительные косметические проблемы. Для фреймворк-специфического кода мы рекомендуем Prettier, настроенный под ваш диалект; для HTML, .htm и шаблонных файлов наш инструмент идеален.

features

Загрузка не происходит. Форматор полностью работает в браузере с js-beautify, так что вы можете безопасно вставлять внутренние шаблоны страниц, черновики писем или HTML с личными данными, не покидая устройство.

privacy

Minify удаляет HTML-комментарии, сжимает любые пробелы между тегами в одно пространство и удаляет разрывы строк. В результате получается HTML с идентичным рендерингом по байтам и обычно на 10-30% меньше. В сочетании с gzip на сервере это заметно уменьшает начальный вес страницы на страницах с большим количеством контента.

technical

Да — нажмите «Скачать», чтобы сохранить красивый выход как output.html, или минифицированный как output.min.html. Файл закодирован в формате UTF-8, поэтому одинаково хорошо работает с английским, кириллицей, CJK и контентом справа налево.

tips

Это небольшая утилита только для браузера — нулевая стоимость хостинга — поэтому мы выпускаем её бесплатно в рамках нашего набора инструментов для разработчиков. Нет рекламы, нет отслеживания результата, нет ограничений по размеру файла, кроме того, что браузер может хранить в памяти.

pricing

Use Cases

Очистка шаблонов электронной почты

Маркетинговый email HTML часто приходит от ESP в виде единого минифицированного blob-файла. Улучшите её, чтобы осмотреть структуру, найти сломанную колонку таблицы и исправить опечатку перед следующим сообщением.

marketing

Миграция контента CMS

Экспорт из одной CMS и импорт в другую обычно связаны с перемещением HTML. Prettify делает различия читаемыми, minify уменьшает полезную нагрузку, а оба режима сохраняют достоверность контента.

development

Выход веб-скрейпинга

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

data

Статическая оптимизация сайта

Минифицируйте сгенерированный HTML из вашего генератора статического сайта перед развертыванием. Уменьшайте размер файла на 10-30% поверх gzip — заметное улучшение времени первой покраски на страницах с большим содержанием.

performance

Фрагменты документации

При вставке HTML-примеров в документы, блог-посты или README-файлы сначала используйте beautify, чтобы читатели могли следовать структуре. Минифицированную версию оставьте для сравнения с «производственным выходом».

documentation

Помощник по рефакторингу JSX

Перед преобразованием фрагмента HTML в JSX окрасивьте его, чтобы скрипт конвертации увидел чистое дерево. Сохраняет ручное форматирование при миграции React/Vue.

development