Форматирование HTML онлайн
Вставьте HTML и нажмите «Форматировать», чтобы получить чистую разметку с одинаковыми отступами, или «Минифицировать», чтобы её сжать. В примере ниже письмо о заказе втиснуто в пять длинных строк.
Исходный код (825 байт)
Как отформатировать HTML
- Вставьте HTML в поле ввода (или оставьте пример, чтобы посмотреть, что получится).
- Выберите отступы, принятые в вашем проекте, и длину строки для переноса.
- Нажмите Форматировать. Скопируйте или скачайте результат из правой панели.
Примеры
- Сжатый шаблон письма. Конструкторы писем часто выгружают разметку в несколько очень длинных строк. В примере выше «Форматировать» превращает примерно 730 символов в пяти строках в документ с отступами, где легко найти строки таблицы, кнопку и скрипт.
- Разметка, скопированная из браузера. Код из DevTools или «Просмотра кода страницы» сохраняет исходные, часто разнобойные отступы. Один проход с 2 пробелами, и diff с вашей версией становится читаемым.
- Выкладка статичной страницы. Минификация убирает комментарии и пробелы перед тем, как вы загрузите лендинг или вставите HTML в поле CMS с ограничением длины. Счётчики байтов над каждой панелью показывают, сколько вы сэкономили.
Вопросы о форматировании HTML
Мой код отправляется на сервер?
Нет. Форматирование работает в вашем браузере на библиотеке с открытым кодом js-beautify, а минификация на небольшой функции этой страницы. Ничего не загружается и не хранится.
CSS и JavaScript внутри HTML тоже форматируются?
Да. Код внутри тегов <style> и <script> получает отступы с помощью форматтеров CSS и JavaScript из той же библиотеки. Инлайновые атрибуты style остаются как есть.
Форматирование может сломать страницу?
Оно меняет только пробелы между тегами и внутри <style> и <script>. Содержимое <pre> и <textarea> не трогается никогда. Пробелы между строчными элементами, например между двумя тегами <span>, могут иметь значение, и форматтер оставляет такие элементы на одной строке.
Что удаляет минификация?
Комментарии, переносы строк, повторяющиеся пробелы и пробелы между блочными тегами. Она ничего не переименовывает, не выбрасывает необязательные теги и не переписывает ваши CSS и JavaScript, поэтому страница отображается точно так же, как раньше.
Чем форматирование HTML отличается от HTML beautifier?
На практике ничем. Оба названия означают расстановку отступов, при которой каждый вложенный элемент стоит на своей строке на нужной глубине. Эта страница делает это, а также обратное (минификацию) в один клик.