Форматирование HTML
Приведите HTML в порядок через Prettier: единые отступы, один элемент на строку, встроенные CSS и JavaScript тоже форматируются. Отступ 2, 4 пробела или табуляция.
Работает полностью в вашем браузере. Ваши данные никуда не загружаются.
Похожие Инструменты
Просмотреть ВсеЧто такое Форматирование HTML?
Инструмент переписывает HTML с чистыми и единообразными отступами через Prettier — форматтер, которым пользуется большинство фронтенд-проектов. Встроенные блоки <style> и <script> тоже форматируются как CSS и JavaScript.
Как пользоваться Форматирование HTML
- Вставьте HTML в поле ввода или нажмите Загрузить пример.
- Выберите Отступ.
- Нажмите Форматировать (результат также обновляется по мере ввода).
- Скопируйте или скачайте результат.
Пример
<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>
<div> <p>Hi<b>x</b></p> <img src="a.png" alt="" /> </div>
Когда использовать Форматирование HTML
Используйте, чтобы привести в порядок HTML из экспорта CMS, шаблонов писем или сгенерированной разметки перед правкой или ревью. Это форматтер, а не валидатор: для незакрытых тегов и повторяющихся id используйте проверку HTML. Очень большие документы могут обрабатываться заметное время, потому что Prettier работает в вашем браузере.
Как работает Форматирование HTML
Код форматируется Prettier 3 (автономная сборка) с его плагинами HTML, CSS и Babel, которые подгружаются по требованию. Prettier разбирает разметку в дерево и печатает его так, чтобы строки умещались в 80 столбцов, заключает атрибуты в кавычки и добавляет /> к пустым элементам. Строчные элементы, чувствительные к пробелам, остаются вместе, чтобы отображение страницы не менялось. Синтаксические ошибки сообщаются со строкой и столбцом от Prettier.
Распространенные Случаи Использования
- Превращение минифицированного или однострочного HTML в читаемый
- Нормализация шаблонов перед код-ревью
- Форматирование фрагментов HTML для документации
- Очистка разметки, скопированной из WYSIWYG-редактора
Примечание по Безопасности
Всё выполняется локально в вашем браузере: вставленный код никуда не загружается.
Часто Задаваемые Вопросы
Какие правила стиля используются?
Настройки Prettier по умолчанию: ширина строки 80 символов, атрибуты в двойных кавычках и выбранный вами отступ.
Изменится ли внешний вид страницы?
Prettier учитывает чувствительность строчных элементов к пробелам, поэтому отображение должно остаться прежним.
Исправляет ли он некорректный HTML?
Нет. Он форматирует то, что разобрал бы браузер; структурные ошибки ищите проверкой HTML.