Почему содержимое и не переформатируется?

Пробелы внутри и отображаются в точности как написаны, а изменение отступов внутри или может изменить код или строки. Эти блоки сохраняются дословно.

HTML-форматирование и украшение

Вставьте неотформатированный или запутанный HTML-код слева и получите правильно оформлённую версию с корректными отступами справа. Инструмент автоматически расставит отступы и переносы строк для удобного чтения.

Ввод

Вывод

Возможности

Автоотступы для HTML-тегов

Настраиваемый отступ

Сохранить или удалить комментарии

Подсветка синтаксиса

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

1. Вставьте HTML-разметку в поле ввода слева.

2. Нажмите «Форматировать» для оформления с правильными отступами.

3. Нажмите «Минифицировать» для удаления лишних пробелов.

4. Скопируйте или скачайте результат из правой панели.

Об этом инструменте

HTML, скопированный из браузера, CMS или минифицированной сборки, часто приходит одной нечитаемой строкой. Этот форматировщик заново расставляет отступы так, чтобы каждый вложенный элемент был на уровень глубже родителя, — структура, пропущенные закрывающие теги и неправильно размещённые элементы сразу бросаются в глаза. Он знает о пустых элементах вроде <br>, <img> и <input>, у которых не бывает закрывающего тега, и оставляет содержимое <pre>, <textarea>, <script> и <style> в точности как есть, потому что пробелы внутри них значимы. Выберите два пробела, четыре пробела или табуляцию, затем скопируйте или скачайте результат. Минификация делает обратное: удаляет комментарии и сжимает пробелы между тегами, уменьшая вес страницы в продакшене.

Часто задаваемые вопросы

Изменит ли форматирование внешний вид страницы?

В большинстве случаев нет. Пробелы между блочными элементами браузеры игнорируют. Но между строчными элементами, например двумя ссылками или span рядом, добавленный или удалённый перенос строки может изменить промежуток на один пробел, поэтому после форматирования проверьте разметку с большим числом строчных элементов.

Почему содержимое <pre> и <script> не переформатируется?

Пробелы внутри <pre> и <textarea> отображаются в точности как написаны, а изменение отступов внутри <script> или <style> может изменить код или строки. Эти блоки сохраняются дословно.

Исправляет ли форматировщик некорректный HTML?

Он не исправляет и не проверяет разметку. Он расставляет отступы в том, что получил, и благодаря этому проблемы вроде незакрытых тегов часто становятся заметны. Для проверки соответствия стандартам используйте валидатор W3C.

Что удаляет минификация?

Она удаляет HTML-комментарии и лишние пробелы между тегами. Содержимое, зависящее от пробелов, например текст внутри <pre>, сохраняется. Для рабочих сайтов сжатие gzip или Brotli на сервере экономит больше, чем одна лишь минификация.

Можно ли форматировать Vue, Angular или синтаксис шаблонов?

Выражения шаблонов вроде {{ name }} сохраняются как текст, а теги компонентов получают отступы как обычные элементы. Сложные директивы с угловыми скобками внутри значений атрибутов могут запутать простой HTML-форматировщик, поэтому проверьте результат.

HTML-форматирование и украшение

Возможности

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

Об этом инструменте

Часто задаваемые вопросы

Похожие инструменты