Форматирование HTML

Q: Что с JavaScript и CSS внутри страницы?

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

Вставьте неряшливый или минифицированный HTML и получите его обратно с отступами, а встроенные скрипты и стили тоже будут приведены в порядок.

Работает полностью в браузере

HTML

Отступ

2 пробела 4 пробела Табуляция

Переносить длинные строки

Содержимое Форматировать встроенные скрипты и стили Сохранять пустые строки (не больше одной подряд)

Ввод до 10 МБ. Инструмент расставляет отступы в разметке и ничего не отклоняет, поэтому не сообщает о том, что HTML некорректен.

Как отформатировать HTML

Вставьте HTML в поле или нажмите Вставить пример.
Выберите отступ, при желании длину строки для переноса и нужно ли форматировать встроенные <script> и <style>.
Аккуратная версия появляется ниже по мере ввода. Скопируйте её или скачайте файлом .html.

Как безопасно расставить отступы в HTML

Браузеры схлопывают большую часть пробельных символов в HTML, поэтому страницу можно записать в одну строку или растянуть на тысячу, и выглядеть она будет одинаково. Шаблоны, вывод CMS и минифицированные сборки часто дают разметку, которую никто не может прочитать. Форматировщик ставит блочные элементы на отдельные строки и сдвигает вложенные элементы под родителями, благодаря чему несовпадающие или неуместные теги сразу заметны.

Ошибаются форматировщики именно в деталях. Пустые элементы вроде <br>, <img> и <input> не имеют закрывающего тега, поэтому не должны увеличивать отступ. Пробелы внутри <pre> и <textarea> отображаются как есть, поэтому трогать их нельзя. А строчные элементы делят строку с окружающими словами, потому что перенос строки в таком месте добавил бы видимый пробел.

Скрипты и таблицы стилей, встроенные в страницу, — это отдельные языки. Форматировщик может оформить их с отступом самой страницы или оставить без изменений, если вы хотите, чтобы разница между версиями была небольшой или код намеренно минифицирован.

Советы

Нужно сжать таблицу стилей? Отдельный CSS обрабатывает инструмент «Минификация и форматирование CSS».
Переводите фрагмент в Markdown для README? Используйте «HTML в Markdown».
Проверяете изменение в шаблоне? Отформатируйте старую и новую версии и сравните их в инструменте «Сравнить тексты».

Вопросы и ответы

Мой HTML загружается на сервер?

Нет. Библиотека форматирования загружается с этого сайта при первой вставке, а разметка обрабатывается только в вашем браузере.

Меняется ли внешний вид страницы?

Меняются пробельные символы между тегами, которые браузеры в основном схлопывают, поэтому страница должна выглядеть так же. Исключение — видимые пробелы: именно поэтому текст внутри <pre> и <textarea> остаётся точно таким, как был.

Сообщит ли он, если мой HTML содержит ошибки?

Нет. Он форматирует нестрого и ничего не отклоняет, поэтому незакрытый тег не вызовет ошибку: отступы просто следуют тому, что найдено. Чтобы найти структурные ошибки, проверьте страницу валидатором.

Что с JavaScript и CSS внутри страницы?

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

Как обрабатываются строчные теги вроде span и a?

Строчные элементы остаются на одной строке со своим текстом, если помещаются, поэтому предложение с <strong> не разбивается на отдельные строки, что добавило бы видимые пробелы.

Что делает перенос длинных строк?

Если задана длина строки, текст, выходящий за предел, переносится на новую строку по границе слова. При значении «Выкл.» каждый фрагмент текста остаётся на одной строке, какой бы длинной она ни была.