HTML Formatter — украсьте и минимизируйте HTML онлайн бесплатно

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

Форматирование разворачивает HTML для удобства чтения: каждый тег на своей строке, вложенные элементы с отступами, пустые строки между разделами сохраняются. Минификация удаляет комментарии, схлопывает пробелы и убирает переносы строк, чтобы файл занимал меньше байт. Используйте форматирование для редактирования и проверки, минификацию — для развёртывания в продакшене.

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

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

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

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

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

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

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

Селектор отступа (2, 4 или 8 пробелов) применяется только в режиме форматирования, поскольку минификация по замыслу убирает все пробелы и переносы строк — отступать становится нечего. Переключитесь обратно на форматирование, чтобы ширина отступа снова вступила в силу.

По мере вставки или редактирования инструмент автоматически выполняет структурную проверку и перечисляет все незакрытые, несоответствующие или лишние закрывающие теги прямо под панелью вывода — отдельная кнопка не нужна. Зелёное сообщение «Структурных проблем не найдено» подтверждает, что разметка корректна.

Используйте режим «Форматирование» с отступом в 2 пробела — это самое распространённое соглашение, при котором diff-ы остаются компактными — затем проверьте панель структурных проблем, чтобы убедиться, что не осталось незакрытого тега. После проверки переключитесь в режим «Минификация» перед выкатом в продакшн, чтобы убрать лишние пробелы.

Да — перетащите файл .html, .htm или .xhtml на область загрузки или кликните по ней для выбора, и его содержимое загрузится прямо в поле ввода точно так же, как если бы вы его вставили. Далее «Prettify», «Minify», ширина отступа и структурный проверщик работают одинаково, независимо от того, пришла разметка из файла или из вставки.

Да — как только появляется результат, рядом с панелью вывода и областью основного действия возникает кнопка «Копировать». Нажатие на неё мгновенно копирует текущий результат «Prettify» или «Minify» в буфер обмена (кнопка ненадолго показывает «Copied!» для подтверждения), чтобы вы могли вставить его прямо в свой редактор или комментарий код-ревью без сохранения промежуточного файла .html.

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

Ошибка указывает на первую позицию, которую не удалось проанализировать, которая обычно находится сразу после реальной ошибки, а не на ней — отсутствующая запятая, незакрытая кавычка или скобка или умная кавычка, вставленная из документа вместо прямой. Сначала проверьте линию над сообщаемым положением.

Нет обоим. HTML Prettify бесплатен, ваша загрузка не содержит водяных знаков, и в конце ничего не запрашивается — в процессе нет такого момента, когда вы заканчиваете работу и обнаруживаете, что она стоит денег.

Нет — HTML Prettify работает в браузере на компьютере и телефоне. Нечего устанавливать, не нужно начинать пробную версию и не нужно покупать лицензию, чтобы увидеть, выполняет ли он то, что вам нужно. Попробуйте его на файле, с которым вы действительно застряли, а не на примере.