Этот форматтер HTML красиво оформляет или минифицирует сырую разметку и автоматически форматирует любой встроенный CSS и JavaScript с помощью Prettier. Вставьте неаккуратный вывод шаблона, спарсенные страницы или написанную вручную разметку и получите чистый, согласованно оформленный HTML за один шаг, или переключитесь в режим минификации, чтобы убрать пробелы и сжать документ для продакшна. Предпросмотр в песочнице позволяет безопасно отрендерить разметку с отключённым скриптингом, поэтому встроенные скрипты никогда не выполняются. Как инструмент красивого оформления и оформления HTML он создан для фронтенд-разработчиков, QA-инженеров и всех, кому нужно форматировать html онлайн без переключения контекста. Всё работает локально в вашем браузере, поэтому ваши данные не покидают устройство. Выбирайте табуляцию или пробелы для отступов, чтобы соответствовать стилю вашего проекта.
Возможности
Красивое оформление HTML с согласованными, читаемыми отступами
Минификация HTML для удаления пробелов и сжатия вывода
Форматирование встроенных блоков <style> и <script> через Prettier
Предпросмотр в песочнице рендерит разметку с отключённым скриптингом
Переключение между табуляцией и пробелами для отступов
Обрабатывает полные страницы или частичные сниппеты разметки
Копирование отформатированного или минифицированного вывода одним кликом
Работает полностью в вашем браузере
Как использовать Форматировщик HTML
Вставьте свой HTML в поле ввода.
Выберите «Красиво оформить» для форматирования, «Минифицировать» для сжатия или «Предпросмотр» для рендеринга.
Переключите «Табуляция», чтобы задать стиль отступов.
Скопируйте отформатированный или минифицированный HTML из панели вывода.
Режим красивого оформления переоформляет разметку и нормализует пробелы.
Частые ошибки и устранение неполадок
Встроенные скрипты не запускаются в предпросмотре. — Это намеренно — предпросмотр представляет собой песочницу 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 или минифицирует обычный JavaScript.
Форматировщик XML — Форматируйте, минифицируйте и проверяйте XML, преобразуйте XML ↔ JSON.
Экранирование HTML — Экранируйте и разэкранируйте специальные символы и сущности HTML.
Предпросмотр Markdown — Преобразуйте Markdown в HTML с предпросмотром в реальном времени.
Оптимизатор SVG — Минифицирует SVG: удаляет комментарии, метаданные и остатки редактора, сжимает пробелы.
Форматировщик JSON — Форматируйте, минимизируйте и проверяйте JSON с указанием места ошибок.
Форматировщик SQL — Форматируйте SQL для MySQL, PostgreSQL, SQL Server, SQLite, BigQuery и Oracle.
Другие инструменты: Форматировщики кода
Форматировщик XML — Форматируйте, минифицируйте и проверяйте XML, преобразуйте XML ↔ JSON.
Форматировщик SQL — Форматируйте SQL для MySQL, PostgreSQL, SQL Server, SQLite, BigQuery и Oracle.
Форматировщик GraphQL — Форматируйте или минифицируйте запросы и схемы GraphQL, проверяйте синтаксис и извлекайте операции.
Форматировщик Dockerfile — Форматируйте Dockerfile и получайте рекомендации по лучшим практикам и линту.