Как пользоваться форматированием HTML
- Вставьте HTML в поле ввода: целую страницу, шаблон или фрагмент, скопированный из инструментов разработчика браузера.
- Нажмите кнопку Форматировать, чтобы расставить отступы в разметке так, чтобы каждый вложенный элемент находился на отдельной строке.
- Нажмите кнопку Минифицировать, чтобы удалить комментарии и лишние пробелы и уменьшить файл.
- Скопируйте результат обратно в редактор или CMS.
Форматировщик работает целиком в вашем браузере. Ваша разметка не загружается и не сохраняется, а обрабатывается как текст: ничто из вставленного не выполняется.
Зачем форматировать HTML?
HTML, созданный конструкторами страниц, редакторами писем, экспортом из CMS и инструментами сборки, часто минифицирован или плохо оформлен отступами. Браузерам это не мешает, но людям трудно разобраться в структуре. Отформатированный HTML ясно показывает дерево документа, так что вы видите, где закрывается каждый <div>, находите неуместный элемент и просматриваете изменения в диффе.
Минификация работает в обратную сторону. Удаление комментариев, отступов и переносов строк делает файл меньше, что немного уменьшает объём передаваемых данных. На большинстве сайтов серверное сжатие (gzip или Brotli) уже заметно уменьшает HTML, поэтому минификация даёт меньший дополнительный выигрыш, но всё равно часто применяется в рабочих сборках.
Частые проблемы в HTML и как их исправить
Браузеры снисходительны: алгоритм разбора HTML восстанавливается после большинства ошибок, а не падает. Это удобно, но означает, что сломанная разметка часто отображается «почти правильно» и вызывает запутанные ошибки вёрстки. Форматирование помогает увидеть эти проблемы.
Незакрытые элементы. Когда отступы всё время сдвигаются вправо и не возвращаются, вероятно, какой-то элемент не закрыт:
<div class="card">
<div class="card-body">
<p>Hello
</div>Единственный </div> закрывает card-body (и неявно завершает абзац), поэтому внешний card остаётся открытым и поглощает всё, что следует дальше. Закрывайте каждый элемент явно:
<div class="card">
<div class="card-body">
<p>Hello</p>
</div>
</div>Блочные элементы внутри строчных или внутри <p>. <div> внутри <p> не допускается: браузер закрывает абзац раньше времени, и ваш CSS перестаёт срабатывать как ожидалось.
Неправильно вложенные теги. <b><i>text</b></i> должно быть <b><i>text</i></b>. Внутренние элементы должны закрываться раньше внешних.
Повторяющиеся ID. Атрибут id должен быть уникальным в документе. Дубликаты ломают getElementById, связи с метками и якоря внутри страницы.
Пустые элементы и пробелы
Некоторые элементы никогда не могут иметь содержимого и не имеют закрывающего тега. Эти пустые (void) элементы:
| Пустые элементы |
|---|
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr |
В HTML <br> и <br /> равнозначны; завершающая косая черта необязательна. Запись </br> или <img></img> — ошибка.
Пробелы между строчными элементами могут быть видны. Две кнопки со свойством inline-block, разделённые переносом строки, показывают небольшой зазор, а те же кнопки в одной строке — нет. Хороший форматировщик в точности сохраняет содержимое <pre> и <textarea>, но если после форматирования или минификации вёрстка немного изменилась, обычная причина — пробелы между строчными элементами.
Советы и лучшие практики
- Делайте отступы в два пробела: с четырьмя сильно вложенный HTML становится очень широким.
- Храните большие встроенные блоки
<style>и<script>в отдельных файлах и приводите их в порядок с помощью форматирования и минификации CSS и форматирования и минификации JavaScript. - Минифицируйте в процессе сборки, а не вручную, чтобы читаемый исходник оставался в системе контроля версий.
- После развёртывания проверьте SEO страницы с помощью SEO-анализа страницы, а время загрузки — с помощью проверки скорости сайта.
Часто задаваемые вопросы
Меняет ли форматирование внешний вид моей страницы?
Обычно нет. Добавление отступов между блочными элементами не имеет видимого эффекта. Пробелы между строчными элементами могут создавать или убирать небольшие зазоры, поэтому после форматирования проверьте страницы с плотной строчной вёрсткой.
Это валидатор HTML?
Нет. Инструмент расставляет отступы и минифицирует разметку, но не проверяет её на соответствие спецификации HTML. Однако форматирование делает многие структурные ошибки легко заметными на глаз.
Лучше ли минифицированный HTML для SEO?
Поисковые системы одинаково хорошо читают и минифицированный, и отформатированный HTML. Минификация может сделать страницы немного меньше, что чуть помогает производительности, но содержание, структура и скорость значат гораздо больше, чем пробелы.
Можно ли форматировать HTML-шаблоны писем?
Да. HTML писем часто опирается на вложенные таблицы и встроенные стили, и форматирование сильно облегчает редактирование. Затем проверьте результат в своей почтовой платформе, так как некоторые почтовые клиенты чувствительны к пробелам.
Обновлено