HTML форматтер

Форматтер раскладывает HTML и XML по строкам с отступами, чтобы стала видна вложенность тегов, и бережно сжимает разметку перед публикацией. Перед обработкой код проверяется: лишний или незакрытый тег, атрибут без кавычек в XML подсвечиваются на месте с номером строки. Текст абзацев, pre, textarea, script и style, а в XML — текст, CDATA и комментарии сохраняются символ в символ.

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

Вставьте разметку или откройте файл .html или .xml — результат появится сразу и обновляется во время ввода; Ctrl+Enter (⌘+Enter на Mac) запускает обработку немедленно. Тип «HTML» или «XML» определяется по файлу или вставленному коду, его можно сменить вручную. Выберите «Форматировать» или «Минифицировать» и отступ: 2, 4 пробела или табуляция. Если парсер нашёл ошибку, кнопка «Перейти к ошибке» переносит к ней курсор.

Код обрабатывается в браузере и не отправляется на сервер, размер — до 2 МБ. HTML не выполняется и не показывается как страница; обработка не очищает опасный код.

Для вашего удобства рекомендую использовать полноэкранный режим.

Тип
Операция
Отступ

Код обрабатывается только в вашем браузере, до 2 МБ в UTF-8.

Обрабатываем код…

Исходный код

Файл не выбран
UTF-8, до 2 МБ. Файл можно перетащить на поле. Код обрабатывается только в вашем браузере.
<article class="card" id="example"><h2>Привет, HTML!</h2><p>Изучаем <strong>вёрстку</strong> вместе.</p><pre>  Эти пробелы
  сохраняются.</pre></article>

Результат

Для обработки кода включите JavaScript.


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


Блочные элементы переносятся на отдельные строки, вложенные получают отступ. Необязательные закрывающие теги, например </li> и </p>, дописываются — так видно, где на самом деле заканчивается элемент. Строчные элементы внутри абзаца остаются в строке: лишний пробел между ними изменил бы отображение текста.


Исходная разметка и результат:


HTML
<ul><li>Один<li>Два</ul><p>Текст <b>жирный</b></p>


HTML
<ul>
  <li>Один</li>
  <li>Два</li>
</ul>
<p>Текст <b>жирный</b></p>


Бережное сжатие HTML


Сжатие убирает лишние пробелы внутри тегов и необязательные кавычки атрибутов: <div  class="a"> становится <div class=a>. Текстовые пробелы, комментарии и встроенные стили и скрипты остаются — в отличие от CSS и JavaScript, в HTML пробел между словами или строчными элементами виден на странице. Для сжатия стилей и скриптов есть минификатор CSS и минификатор JavaScript.


Форматирование и проверка XML


XML строже HTML, поэтому перед обработкой документ проверяется: каждый тег закрыт и совпадает с открытым, атрибуты записаны в кавычках и не повторяются, корневой элемент один, а символы & и < в тексте записаны как &amp; и &lt;. Схема документа (XSD, DTD) не проверяется.


Меняются только пробелы между элементами. Смешанный текст, элементы с xml:space="preserve", блоки CDATA, комментарии и DOCTYPE сохраняются как есть. Длинный тег с несколькими атрибутами раскладывается по атрибуту на строку.


HTML
<catalog><course id="html"><title>Основы HTML</title></course></catalog>


HTML
<catalog>
  <course id="html">
    <title>Основы HTML</title>
  </course>
</catalog>


SVG — тоже XML, но для него есть отдельная группа инструментов: «Оптимизация SVG» форматирует рисунок без изменений или сжимает и оптимизирует его.




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


Почему HTML после сжатия почти не уменьшается?


Сжатие сохраняет текстовые пробелы и комментарии, чтобы страница выглядела так же, как до обработки. Основной выигрыш при передаче даёт сжатие gzip или Brotli на сервере.


Форматтер проверяет HTML на валидность?


Он находит синтаксические ошибки: лишний закрывающий тег, незавершённый тег или атрибут. Правила вложенности и допустимые атрибуты не проверяются — для этого нужен валидатор W3C.


Почему XML-документ не принимается как HTML?


Можно и так, но HTML-парсер не заметит ошибок, недопустимых в XML, и может изменить пробелы в тексте. Выберите тип «XML» — он определяется сам, если документ начинается с <?xml или файл имеет расширение .xml.




Изучить HTML


Структура документа и назначение тегов описаны в учебнике HTML; оформление разметки — в учебнике CSS. Данные в JSON форматирует JSON форматтер.