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

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


            

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

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

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

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

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

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

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

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

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

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

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

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

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

Форматирование может в одном конкретном случае: перевод строки между строчными элементами добавляет пробел, которого не было. Если вёрстка держится на том, что два span соприкасаются, отформатируйте окружающий блок, а эту строку не трогайте. Минификация же сделана так, чтобы избежать обратной стороны той же проблемы.
Новое
Минификация CSS Сожмите CSS, убрав комментарии и пробелы, или разверните обратно с ровными отступами. Пробелы в calc(), строки и лицензии остаются нетронутыми.
Популярное сегодня
Тестер регулярных выражений Напишите регулярное выражение и сразу увидьте совпадения, группы и замену. Разогнавшийся шаблон будет остановлен, а не заморозит вкладку.

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

Генератор MD5 Бесплатный генератор MD5: превратите текст или файл в контрольную сумму MD5 прямо в браузере - удобно для проверки целостности.
Кодировщик и декодировщик Base64 Бесплатный кодировщик и декодировщик Base64: преобразуйте текст или файлы в Base64 и обратно прямо в браузере, без загрузки на сервер.
Генератор Lorem Ipsum Бесплатный генератор Lorem Ipsum: создавайте текст-рыбу по абзацам, предложениям или словам, при желании с HTML-тегами для макетов.
JWT Декодер Бесплатный декодер JWT: вставьте токен, чтобы прочитать заголовок, полезную нагрузку и подпись - всё в браузере, без отправки.
Кодировщик и декодировщик URL Бесплатный кодировщик и декодировщик URL: переводите ссылки и параметры в процентное кодирование и обратно, целиком или по частям.

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

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