Расставьте отступы в неряшливом HTML или минифицируйте его и увидите экономию
Работает в вашем браузере. Ничего из того, что вы вводите, никуда не отправляется.Форматирование HTML расставляет отступы во вложенных тегах, чтобы стала видна структура, а минификация убирает пробелы между ними. Сэкономленные байты показаны, и на странице в 100 KB это обычно того стоит. Всё разбирается в вашем браузере, так что неопубликованная страница остаётся закрытой.
Эта страница переведена машинным способом с английского оригинала. Перевод ещё не проверен человеком, поэтому ориентируйтесь на английскую версию. Читать английский оригинал
Вставьте разметку в поле HTML или нажмите «Попробовать пример».
Оставьте «Форматировать», чтобы расставить отступы, или выберите «Минифицировать», чтобы убрать комментарии и лишние пробелы.
В режиме «Форматировать» выберите 2 пробела, 4 пробела или Tab и задайте «Перенос после» для длинных списков атрибутов.
Нажмите «Копировать» или «Скачать», чтобы забрать результат.
Этот инструмент делает две вещи, которые нужны от разметки: делает её читаемой или делает её маленькой. Вставьте слева, и результат появится справа. «Форматировать» ставит каждый элемент на отдельную строку с отступом в два пробела, четыре пробела или табуляцию и переносит длинные списки атрибутов по выбранной ширине. «Минифицировать» убирает комментарии и лишние пробелы и показывает размер до, размер после и процент экономии.
Чаще всего работа начинается с разметки, которую никто не писал вручную. Страница, сохранённая из браузера, приходит одной строкой. Шаблонизатор выдаёт блок со смешанными табуляциями и пробелами. Сборка отдаёт продакшен-HTML, и нужно понять, как устроен раздел. Если сначала отформатировать, любой из этих случаев превращается в то, что можно читать и искать.
Минификатор намеренно осторожен. Пробел между двумя строчными элементами виден на экране, поэтому он остаётся; удаляются только пробелы между блочными тегами, которые браузер всё равно отбрасывает. Комментарии удаляются, кроме условных комментариев для старого Internet Explorer. Содержимое pre, textarea, script и style копируется символ в символ, поэтому отступы, которые видят пользователи, никогда не затрагиваются. При удалении кавычек атрибутов любое значение со слешем остаётся в кавычках, потому что браузеры принимают href=/a/b, а некоторые инструменты сборки его не прочитают. Скрипты и таблицы стилей здесь не минифицируются; для них используйте JavaScript Minifier и CSS Minifier.
Если разметку не удаётся прочитать, вы получите строку и столбец проблемы и что исправить, например незакрытый комментарий или значение атрибута без кавычки. Всё работает в браузере, поэтому страницы с именами клиентов или внутренними URL никогда не покидают ваше устройство.
Да. Нет регистрации, водяного знака и ограничений на объём вставляемой разметки или число использований. Страница оплачивается несколькими объявлениями вне инструмента и никогда внутри результата.
Нет. Форматирование и минификация выполняются в браузере на JavaScript. Разметка с именами клиентов, внутренними URL или ключами API в теге script никогда не покидает ваше устройство, и после закрытия вкладки ничего не сохраняется.
Обычно на 3–10 процентов исходных байтов и немного больше без кавычек атрибутов. Больше всего экономит разметка с глубокими отступами; уже минифицированная страница не экономит ничего. Инструмент показывает точный размер до, размер после и процент, так что гадать не придётся.
Минификация не должна менять то, как отображается страница. Пробелы удаляются только между блочными тегами, где браузеры их всё равно игнорируют. Пробел между двумя строчными элементами вроде span или strong виден, поэтому сохраняется, а содержимое pre, textarea, script и style копируется точно.
Да. Выберите «Форматировать», и единственная строка развернётся в разметку с отступами, по одному элементу в строке. Ничего не добавляется и не удаляется, так что вы читаете ровно то, что получил браузер. Выберите ширину отступа и переноса, как в вашем редакторе.
Нет. Всё внутри тегов style или script копируется без изменений, потому что для минификации нужен полноценный парсер CSS или JavaScript. Пропустите эти части через CSS Minifier и JavaScript Minifier и вставьте результаты обратно.
Всё ещё не получается? Задайте вопрос об инструменте «Форматирование и минификация HTML» и ответить может любой, кто знает. Учётная запись не нужна.