Просмотр HTML онлайн с живым предпросмотром
Вставьте HTML-код или откройте файл .html и смотрите страницу прямо во время набора. CSS и JavaScript пишутся в отдельных вкладках, вёрстку можно проверить на ширине телефона, планшета и ноутбука, сообщения и ошибки консоли видны под окном, а проверка покажет незакрытые теги, повторяющиеся id и картинки без alt. Код можно отформатировать, сжать, скачать или отправить ссылкой. Предпросмотр работает в песочнице, отдельно от этого сайта.
Бесплатно · Без регистрации
Как пользоваться
- Вставьте HTML в поле, откройте файл .html или загрузите пример.
- Если есть CSS или JavaScript, добавьте их во вкладки.
- Смотрите предпросмотр, переключайте ширину телефона и планшета, читайте консоль.
- Исправьте замечания проверки и скачайте, скопируйте или отправьте результат.
Почему стоит использовать этот инструмент
Живой предпросмотр
Страница обновляется при наборе, HTML, CSS и JavaScript в отдельных вкладках.
Ширина телефона и планшета
Смотрите страницу на 375, 768 и 1280 пикселях и проверяйте адаптивную вёрстку.
Консоль
Вывод console.log, предупреждения и ошибки JavaScript видны под предпросмотром.
Проверка кода
Находит незакрытые теги, дубли id, картинки без alt, отсутствие title и другое с номером строки.
Форматирование и сжатие
Аккуратные отступы для чтения или код без пробелов и комментариев для меньшего веса.
Безопасная песочница
Код выполняется изолированно, без доступа к этому сайту, и никуда не загружается.
Как посмотреть HTML-файл
Браузер откроет файл .html, но покажет только результат. Здесь код и страница видны рядом, правки применяются сразу, а ошибки, которые браузер молча исправляет, становятся заметны. Откройте файл кнопкой «Открыть файл» или вставьте исходный код, скопированный через Ctrl+U.
Проверка HTML-блоков для Тильды, Битрикса и WordPress
В конструкторах сайтов HTML-код часто вставляют отдельным блоком: виджет, форму, таблицу. Перед вставкой посмотрите, как блок выглядит на ширине телефона, и уберите незакрытые теги — они могут сломать вёрстку всей страницы.
То же касается HTML-писем и подписей для почты: они собираются из таблиц и встроенных стилей, а атрибут alt виден, когда почтовик блокирует картинки.
Учим HTML на уроках информатики
На уроках и курсах живой предпросмотр сразу показывает, что делает каждый тег и каждое CSS-правило. Загрузите простую страницу, поменяйте цвет или заголовок и посмотрите результат. Проверка кода простыми словами объясняет типичные ошибки новичков.
Что находит проверка кода
- Незакрытые теги и теги, закрытые в неправильном порядке.
- Повторяющиеся id и атрибуты.
- Картинки без alt и ссылки в новую вкладку без noopener.
- Отсутствие doctype, lang, charset, viewport и title на целой странице.
- Пропуски уровней заголовков и несколько h1.
- Устаревшие теги вроде center, font и marquee.
Частые вопросы
Безопасно ли вставлять чужой HTML?
Да. Предпросмотр работает в песочнице без доступа к cookie и хранилищу этого сайта. JavaScript можно отключить.
Загружается ли мой код на сервер?
Нет. Всё работает в браузере. Ссылка для отправки содержит код внутри себя, на сервере ничего не хранится.
Почему не видны картинки с моего компьютера?
Относительные пути вроде img/logo.png указывают на файлы на вашем компьютере, к которым у предпросмотра нет доступа. Используйте полные адреса https:// или вставьте CSS во вкладку CSS.
Как проверить мобильную версию?
Выберите «Телефон» — страница покажется шириной 375 пикселей. Есть также «Планшет» и «Ноутбук». Не забудьте meta viewport.
Что делать, если вместо русских букв непонятные символы?
Добавьте <meta charset="utf-8"> в head. Старые файлы в кодировке Windows-1251 пересохраните в UTF-8.
Работают ли PHP и React?
Показываются обычные HTML, CSS и JavaScript. Для PHP нужен сервер, а код React нужно собрать или подключить через CDN.
Как проверить HTML-код перед публикацией
Похожие инструменты
Нужно что-то создать?
Расскажите, что вы хотите построить.
Расскажите, что вам нужно создать: от простого сайта до полноценного приложения, AI-решения, автоматизации или индивидуальной системы.