Что такое форматтер HTML?

Форматтер HTML — это браузерный инструмент, который красиво оформляет или минифицирует разметку HTML с помощью Prettier, форматирует встроенный CSS и JavaScript и предпросматривает результат в песочнице iframe.

Как красиво оформить минифицированный HTML?

Вставьте свой минифицированный HTML в поле ввода и выберите «Красиво оформить». Форматтер HTML переоформляет разметку и переформатирует любые встроенные блоки и для читаемости.

Форматирует ли форматтер HTML встроенный CSS и JavaScript?

Да. Prettier форматирует блоки и автоматически как часть красивого оформления страницы.

Могу ли я минифицировать HTML, а также красиво оформить его?

Да. Переключитесь в режим минификации, чтобы убрать пробелы и получить наименьшую эквивалентную разметку для продакшна.

Могу ли я выбрать табуляцию вместо пробелов?

Да. Переключите опцию «Табуляция» в форматтере HTML, чтобы делать отступы табуляцией, или оставьте её выключенной для использования пробелов.

Загружается ли мой HTML куда-либо при форматировании?

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

Форматировщик HTML

Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.

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

Наводите порядок в таблицах стилей? Попробуйте CSS Formatter.

Об инструменте Форматировщик HTML

Этот форматтер HTML красиво оформляет или минифицирует сырую разметку и автоматически форматирует любой встроенный CSS и JavaScript с помощью Prettier. Вставьте неаккуратный вывод шаблона, спарсенные страницы или написанную вручную разметку и получите чистый, согласованно оформленный HTML за один шаг, или переключитесь в режим минификации, чтобы убрать пробелы и сжать документ для продакшна. Предпросмотр в песочнице позволяет безопасно отрендерить разметку с отключённым скриптингом, поэтому встроенные скрипты никогда не выполняются. Как инструмент красивого оформления и оформления HTML он создан для фронтенд-разработчиков, QA-инженеров и всех, кому нужно форматировать html онлайн без переключения контекста. Всё работает локально в вашем браузере, поэтому ваши данные не покидают устройство. Выбирайте табуляцию или пробелы для отступов, чтобы соответствовать стилю вашего проекта.

Возможности

Красивое оформление HTML с согласованными, читаемыми отступами
Минификация HTML для удаления пробелов и сжатия вывода
Форматирование встроенных блоков <style> и <script> через Prettier
Предпросмотр в песочнице рендерит разметку с отключённым скриптингом
Переключение между табуляцией и пробелами для отступов
Обрабатывает полные страницы или частичные сниппеты разметки
Копирование отформатированного или минифицированного вывода одним кликом
Работает полностью в вашем браузере

Как использовать Форматировщик HTML

Вставьте свой HTML в поле ввода.
Выберите «Красиво оформить» для форматирования, «Минифицировать» для сжатия или «Предпросмотр» для рендеринга.
Переключите «Табуляция», чтобы задать стиль отступов.
Скопируйте отформатированный или минифицированный HTML из панели вывода.

Пример

Ввод

<div   class="card"><h1>Привет</h1><p>Привет   мир</p></div>

Результат

<div class="card">
  <h1>Привет</h1>
  <p>Привет мир</p>
</div>

Режим красивого оформления переоформляет разметку и нормализует пробелы.

Частые ошибки и устранение неполадок

Встроенные скрипты не запускаются в предпросмотре. — Это намеренно — предпросмотр представляет собой песочницу iframe с отключённым скриптингом, чтобы страницы рендерились безопасно. Тестируйте интерактивный код в собственной среде.
Встроенный CSS или JS не переформатируется. — Убедитесь, что код находится внутри корректных тегов <style> или <script>; Prettier форматирует только распознанные встроенные блоки при красивом оформлении.
Некорректные или незакрытые теги вызывают неожиданные отступы. — Закройте несовпадающие теги в исходнике — форматтер переоформляет валидную структуру, но не может угадать предполагаемую вложенность.
Минифицированный вывод трудно читать. — Переключитесь обратно в режим красивого оформления; минификация предназначена для размера в продакшне, а не для читаемости.

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

Что такое форматтер HTML?: Форматтер HTML — это браузерный инструмент, который красиво оформляет или минифицирует разметку HTML с помощью Prettier, форматирует встроенный CSS и JavaScript и предпросматривает результат в песочнице iframe.
Как красиво оформить минифицированный HTML?: Вставьте свой минифицированный HTML в поле ввода и выберите «Красиво оформить». Форматтер HTML переоформляет разметку и переформатирует любые встроенные блоки <style> и <script> для читаемости.
Форматирует ли форматтер HTML встроенный CSS и JavaScript?: Да. Prettier форматирует блоки <style> и <script> автоматически как часть красивого оформления страницы.
Могу ли я минифицировать HTML, а также красиво оформить его?: Да. Переключитесь в режим минификации, чтобы убрать пробелы и получить наименьшую эквивалентную разметку для продакшна.
Могу ли я выбрать табуляцию вместо пробелов?: Да. Переключите опцию «Табуляция» в форматтере HTML, чтобы делать отступы табуляцией, или оставьте её выключенной для использования пробелов.
Загружается ли мой HTML куда-либо при форматировании?: Нет. Всё форматирование и рендеринг предпросмотра происходят локально в вашем браузере, поэтому ваша разметка не покидает устройство.

Связанные инструменты

Форматировщик CSS / SCSS — Форматируйте или минифицируйте CSS/SCSS/LESS, сортируйте свойства и убирайте дубликаты.
Форматировщик JS / TS — Форматируйте или минифицируйте JavaScript, TypeScript и JSX/TSX с настройками Prettier.
Форматировщик XML — Форматируйте, минифицируйте и проверяйте XML, преобразуйте XML ↔ JSON.
Экранирование HTML — Экранируйте и разэкранируйте специальные символы и сущности HTML.
Предпросмотр Markdown — Преобразуйте Markdown в HTML с предпросмотром в реальном времени.
Оптимизатор SVG — Минифицирует SVG: удаляет комментарии, метаданные и остатки редактора, сжимает пробелы.
Форматировщик JSON — Форматируйте, минимизируйте и проверяйте JSON с указанием места ошибок.
Форматировщик SQL — Форматируйте SQL для MySQL, PostgreSQL, SQL Server, SQLite, BigQuery и Oracle.