Как пользоваться

Вставьте HTML в поле ввода, откройте файл .html или попробуйте пример.
Выберите «Форматировать» для форматированного, читаемого кода или «Минифицировать» для компактного вывода.
При форматировании выберите 2 пробела, 4 пробела или табуляцию и решите, сохранять ли комментарии.
Скопируйте результат или скачайте его как файл .html.

Как это работает

Инструмент форматирования читает HTML нестрогим токенизатором, как это делает браузер, и записывает его заново. Он не выполняет рендеринг входных данных, поэтому скрипты во вставленном коде не запускаются, и из сети ничего не загружается.

Форматирование (Beautify) размещает каждый блочный элемент (div, p, ul, li, section, table, …) на отдельной строке с отступом, соответствующим глубине вложенности. Текст и строчные элементы, такие как a, b, em, span, code, img и br, остаются на одной строке, поэтому пробелы между словами и ссылками не изменяются так, чтобы это повлияло на отображение страницы. Несколько пробелов и переносов строк в тексте преобразуются в один пробел — браузеры всё равно отображают их именно так.

Содержимое элементов pre, textarea, script и style копируется точно как в исходнике, включая пробельные символы и любые символы < или >. Пустые элементы, такие как br, img, input, meta и link, никогда не получают закрывающий тег. Самозакрывающиеся теги, например <path /> во встроенном SVG, остаются самозакрывающимися.

Минификация сжимает пробельные символы в тексте до одиночных пробелов, удаляет пробелы рядом с блочными элементами, нормализует пробелы между атрибутами и, если параметр «Сохранять комментарии» выключен, удаляет комментарии. Условные комментарии всегда сохраняются.

Инструмент не исправляет некорректный HTML, не добавляет недостающие теги, не меняет порядок атрибутов и не минифицирует CSS и JavaScript внутри элементов style и script. Элементы, оставшиеся незакрытыми, закрываются в конце родительского элемента, а закрывающий тег без соответствующего открывающего сохраняется как есть.

Примеры

Чтение сгенерированной разметки

CMS выводит шаблон одной длинной строкой. Форматирование с отступом 2 пробела показывает навигацию, пункты списка и основное содержимое в виде дерева с отступами, а фраза «Цены включают <strong>НДС</strong>» остаётся на одной читаемой строке.

Подготовка шаблона письма

Минифицируйте HTML-письмо с выключенными комментариями, чтобы уменьшить его размер. Блок <pre> с таблицей цен и встроенный элемент <style> остаются без изменений.

Проверка структуры

Если отсутствует закрывающий </div>, в отформатированном результате следующие элементы будут иметь отступ на один уровень глубже, чем нужно, — это позволяет легко увидеть, где должен был закончиться элемент.

Часто задаваемые вопросы

Повлияет ли форматирование на внешний вид моей страницы?

Почти никогда. Пробелы внутри блочных элементов схлопываются и переносятся на переносы строк, которые браузеры игнорируют. Текст и строчные элементы остаются на той же строке, а pre, textarea, script и style не изменяются. Исключение — страницы, использующие CSS white-space: pre на обычных элементах.

Минифицирует ли он CSS и JavaScript внутри страницы?

Нет. Содержимое script и style сохраняется точно как написано, поэтому ничего не сломается. Для минификации таблицы стилей отдельно используйте CSS Formatter.

Безопасно ли вставлять HTML из неизвестного источника?

Да. Ввод обрабатывается только как текст и никогда не вставляется в страницу, поэтому его скрипты не выполняются, а изображения и ссылки не загружаются.

Проверяет ли он мой HTML на валидность?

Нет. Инструмент намеренно лоялен и форматирует некорректную разметку, а не отклоняет её. Несовпадающие закрывающие теги сохраняются, поэтому отступы помогают их заметить, но список ошибок не выводится.

Конфиденциальность

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