Форматирование и минификация HTML - читаемо или компактно

Форматирование и минификация HTML

Что делает этот инструмент

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

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

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

Пробелы не всегда шум

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

Почему pre и textarea остаются нетронутыми

Внутри них каждый пробел и перевод строки это содержимое, которое увидит читатель. Переставить отступы в блоке кода значит молча изменить то, что он показывает, а обрезать textarea значит изменить значение, отправляемое формой. То же с script и style: их содержимое это другой язык, и оно проходит нетронутым.

Он форматирует, а не чинит

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

Минификация HTML это малый выигрыш

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

Форматирование HTML - частые вопросы

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

Самые популярные инструменты разработчика

Популярное сегодня
Форматировщик YAML Переформатируйте отступы в запутанном YAML, найдите ошибку с номером строки и прочитайте документ как JSON. Комментарии, блочные скаляры и якоря сохраняются. Работает в браузере.
Новое
Редактор Markdown Пишите Markdown и смотрите результат рядом. Поддерживаются заголовки, списки, таблицы, блоки кода и ссылки; скопируйте HTML или скачайте файлы .md и .html. Работает в вашем браузере.

Связанные инструменты разработчика

JSON форматтер Форматируйте, сжимайте и проверяйте JSON прямо в браузере. Ошибка указывается по строке и столбцу, а дерево показывает структуру.
Минификация CSS Сожмите CSS, убрав комментарии и пробелы, или разверните обратно с ровными отступами. Пробелы в calc(), строки и лицензии остаются нетронутыми.
Формат XML Расставьте отступы в запутанном XML или сожмите его. Понимает RSS, CDATA и пространства имён и никогда не переписывает ваш документ.
Формат SQL Разложите длинный запрос по читаемым строкам или сожмите обратно в одну. Регистр ключевых слов, имена в кавычках и строки остаются как есть.
Минификатор JavaScript Сожмите JavaScript через Terser - движок сборщиков. Он разбирает код, а не угадывает, поэтому поведение сохраняется. Ничего не загружается.

Другие инструменты, которые могут вам понравиться

Word в PDF Конвертируйте Word в PDF бесплатно: загрузите DOC, DOCX, ODT или RTF и скачайте аккуратно свёрстанный PDF за считаные секунды.
PDF в Word Конвертируйте PDF в Word бесплатно: загрузите PDF и скачайте редактируемый DOCX за секунды - без регистрации и водяных знаков.
Счетчик слов Бесплатный счётчик слов: вставьте текст, чтобы узнать число слов, символов, предложений и абзацев, а также время чтения. Текст остаётся в браузере.
Счетчик символов Бесплатный счётчик символов: символы с пробелами и без, слова и строки, а также проверка SEO-лимитов для заголовков и описаний.
Проверка плотности ключевых слов Бесплатный анализ плотности ключевых слов: вставьте текст или ссылку и посмотрите частоту каждого слова и фразы в процентах.