HTML-просмотрщик

Откройте HTML-файл онлайн или вставьте код — страница отрисуется рядом с редактором. Понимает windows-1251 и KOI8-R из meta charset, сохраняет в .html.

Чтобы открыть HTML-файл онлайн, нажмите «Открыть файл» или перетащите .html прямо на редактор: исходный код появится слева, отрисованная страница — справа. Старые русскоязычные страницы в windows-1251 или KOI8-R читаются по объявленной в них кодировке (meta charset), поэтому вместо кракозябр вы видите нормальный кириллический текст. Разметку можно править с подсветкой синтаксиса, а затем скачать результат как .html или скопировать. Файл читается локально и показывается в изолированном iframe — на сервер ничего не уходит.

HTML-просмотрщик

1485

Редактор

Код

Предпросмотр

Живой предпросмотр

Вам также может понадобиться

HTML в JSON

Преобразовать структуру HTML в дерево JSON.

Открыть инструмент

HTML минификатор/форматер

Минифицируйте или форматируйте HTML-текст с отступом в 2/4 пробела.

Открыть инструмент

Markdown Просмотрщик

Просматривайте и редактируйте Markdown с живой визуализацией.

Открыть инструмент

Онлайн-просмотрщик XML

Открывайте, просматривайте и форматируйте XML-файлы онлайн с древовидным просмотром и валидацией.

Открыть инструмент

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

  1. 1

    Откройте файл или вставьте код

    Нажмите «Открыть файл» и выберите документ .html, .htm или .xhtml, перетащите его на поле редактора или просто вставьте исходный код из буфера обмена.

  2. 2

    Проверьте кодировку

    Сначала учитывается BOM, затем объявление <meta charset> или http-equiv в первых 1024 байтах: windows-1251, KOI8-R, Shift_JIS, GBK и другие. Без объявления файл читается как UTF-8. Имя файла и найденная кодировка видны в шапке редактора.

  3. 3

    Посмотрите результат справа

    Панель предпросмотра рендерит разметку примерно через полсекунды после остановки ввода — точно так же, как это сделал бы браузер.

  4. 4

    Правьте и сохраняйте

    Меняйте код и сразу смотрите, что получилось, затем «Скачать .html» сохранит страницу под именем исходного файла, «Копировать» заберёт разметку, а режим «На весь экран» даст больше места (выход — Esc).

Источники

  • MDN — HTML

    Справочник и руководства по всем HTML-элементам и атрибутам, на русском языке.

  • WHATWG — HTML Standard

    Живой стандарт, определяющий синтаксис HTML и правила рендеринга в браузерах (на английском).

  • MDN — элемент iframe и атрибут sandbox

    Описание ограничений sandbox, которые применяются к панели предпросмотра (страница доступна только на английском).

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

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

Как открыть HTML-файл онлайн?
Нажмите «Открыть файл» и выберите .html на диске или перетащите его с рабочего стола на редактор. Исходный код загрузится в левую панель, а справа сразу появится отрисованная страница; сам файл при этом не покидает компьютер.
Почему вместо русского текста кракозябры?
Обычно файл сохранён в windows-1251 или KOI8-R, а читается как UTF-8. Просмотрщик берёт кодировку из <meta charset> или из http-equiv, если они стоят в начале файла (первые 1024 байта). Если такой строки нет, добавьте в <head>, например, <meta charset="windows-1251"> и откройте файл заново — кириллица отобразится правильно.
Чем открыть файл HTML?
Двойной щелчок открывает готовую страницу в браузере, а «Блокнот» или редактор кода показывает исходный код. Этот просмотрщик даёт и то и другое одновременно: код слева, отрендеренная страница справа.
Поддерживаются ли .htm и .mhtml?
Файл .htm — тот же HTML, он открывается кнопкой «Открыть файл» так же, как .html; расширение .xhtml тоже принимается. Формат .mhtml — архив страницы вместе с ресурсами, здесь он не отрисуется: сначала пересохраните страницу как обычный HTML.
Чем это отличается от просмотра исходного кода страницы (Ctrl+U)?
Ctrl+U показывает код чужого сайта только для чтения. Здесь можно открыть собственный файл или вставить разметку, править её и тут же видеть, как меняется отрисованная страница, — то есть экспериментировать, а не только читать.
Как открыть HTML-файл на телефоне (iPhone или Android)?
Да. В мобильных Safari и Chrome кнопка «Открыть файл» вызывает системный выбор файлов, так что документ из «Файлов», Google Диска или «Загрузок» открывается напрямую. На телефоне редактор и предпросмотр располагаются друг под другом.
Можно ли сохранить или скачать отредактированную страницу?
Да. «Скачать .html» сохраняет текущее содержимое редактора в UTF-8; если вы открывали файл, сохраняется его имя, иначе получится index.html. Если исходник объявлял другую кодировку, в копии meta charset заменяется на utf-8, чтобы текст не превратился в мешанину символов.
Можно ли перевести HTML в PDF?
Напрямую нет — инструмент только отображает и правит HTML. Скачайте страницу кнопкой «Скачать .html», откройте её в браузере и выберите «Печать» → «Сохранить как PDF».
Загружаются ли внешние CSS, JavaScript и картинки, и насколько это безопасно?
Абсолютные https-ссылки (например, на CDN) работают, а относительные пути вида ./style.css — нет, потому что у предпросмотра нет своей папки. Кадр изолирован через sandbox: скрипты разрешены, но доступа к тому же origin нет, поэтому cookie, хранилище и диалоги alert заблокированы.