Форматирование HTML
Приводите в порядок HTML или минифицируйте его для продакшена.
Работает в браузере. То, что вы вводите, никуда не отправляется.
- Отступ 2 или 4 пробела
- Минификация в один клик
- Ничего не загружается
Как форматировать HTML
- Вставьте свой HTML.
- Выберите размер отступа или включите минификацию.
- Скопируйте или скачайте результат.
Форматирование против минификации
| Форматирование | Минификация | |
|---|---|---|
| Отступы | Добавляет 2, 4 или 8 пробелов | Убирает их |
| Комментарии | Сохраняются | Убираются |
| Пробелы между тегами | Нормализуются | Убираются |
| Содержимое в pre, textarea, script, style | Не трогается | Не трогается |
Где важен минифицированный HTML
- Продакшен-страница загружается чуть быстрее и использует меньше трафика, когда пробелы и комментарии убраны.
- Минифицированную разметку сложнее читать в view-source, что оправдано в продакшене, но неудобно при отладке.
Советы по форматированию HTML
- Храните читаемую версию с отступами в системе контроля версий и минифицируйте только то, что разворачиваете, ведь отладка минифицированной разметки на глаз идёт медленно.
- Отступ в 2 пробела подходит для глубоко вложенной разметки, а 4 пробела легче просматривать на неглубоких, простых страницах.
На что влияют отступы, а на что нет
- Они никогда не меняют то, что рисует браузер, ведь пробелы между блочными тегами схлопываются в любом случае.
- Они могут заметно сдвинуть расстояние между строчными элементами вроде <span>, если дизайн полагается на точные пробелы там. Проверьте эти места после форматирования.
- Они никак не влияют на поведение JavaScript, ведь структура DOM страницы остаётся той же в любом случае.
Частые вопросы о Форматирование HTML
Что здесь делает минификация?
Она убирает комментарии и пробелы между тегами, не трогая текст и атрибуты внутри тегов pre, textarea, script и style.
Форматирование изменит внешний вид моей страницы?
Нет. Отступы и пробелы между тегами не влияют на отображение, поэтому страница выглядит одинаково до и после.
Это исправляет сломанные или незакрытые теги?
Нет. Оно переформатирует тот HTML, который вы дали. Сначала исправьте пропущенные или несовпадающие теги в своём редакторе.
Можно форматировать целый HTML-документ?
Да, включая doctype, head и body. Очень длинные документы могут форматироваться чуть дольше.
Это проверяет валидность моего HTML?
Нет. Оно форматирует или минифицирует любую разметку, которую вы даёте, и не проверяет отсутствие alt-текста, незакрытые теги или другие вопросы валидации.
Встроенные теги style и script тоже форматируются?
Да, при форматировании. Форматировщик расставляет отступы у CSS внутри тега style и у JavaScript внутри тега script вместе с окружающей разметкой.
Минификация убирает комментарии, которые использует система шаблонов?
Обычные HTML-комментарии (<!-- ... -->) всегда убираются, включая те, что система шаблонов может использовать как маркеры. Если ваши комментарии несут смысл где-то ещё, используйте только форматирование и пропустите минификацию.
Можно форматировать просто фрагмент, без целого документа?
Да. Фрагмент из нескольких тегов форматируется так же, как целая страница. Для работы не нужны doctype, head или body.