Вёрстка фреймами — это разбиение веб-страницы на независимые области, каждая из которых загружает отдельный HTML-документ. Классические теги <frameset> и <frame> исключены из стандарта HTML5, и в 2026 году для вёрстки они не используются: единственный актуальный фрейм — <iframe>, а раскладку страницы строят на CSS Flexbox и Grid. В статье разберём, как устроена верстка фреймами, почему классическая схема устарела и что применять вместо неё.
Основы верстки фреймами
Фрейм в веб-разработке — это окно или область внутри веб-страницы, которая может содержать другую веб-страницу или документ. Фреймы позволяют разбивать страницу на несколько частей, каждая из которых загружает своё содержимое независимо от остальных.
Исторически для создания фреймов в HTML использовались четыре тега:
- <frameset>: определял структуру страницы — делил окно браузера на строки и колонки. Заменял собой тег <body>.
- <frame>: создавал отдельный фрейм внутри <frameset> и загружал в него документ через атрибут src.
- <noframes>: содержал запасной контент для браузеров без поддержки фреймов.
- <iframe>: встраивает одну веб-страницу внутрь другой. Единственный из четырёх тегов, который остался в современном стандарте HTML.
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
Почему frameset устарел
Стандарт HTML5 исключил теги <frame>, <frameset> и <noframes>. В документации MDN элемент frameset помечен как deprecated: браузеры могут поддерживать его только для совместимости, и «эта возможность может перестать работать в любой момент». Вместо фреймовой структуры MDN рекомендует <iframe>.
Причины, по которым от классических фреймов отказались:
- Поисковые системы плохо индексировали содержимое фреймов: каждый фрейм — отдельный документ, и в выдачу попадали «осколки» сайта без навигации.
- Ломалась навигация: кнопка «Назад» вела себя непредсказуемо, а адресная строка не отражала реальное состояние страницы — нельзя было сослаться на конкретный вид или добавить его в закладки.
- Фреймовая раскладка с фиксированными строками и колонками не адаптировалась под мобильные экраны.
- Скринридеры и другие ассистивные технологии с трудом разбирали структуру из нескольких вложенных документов.
Пример кода на frameset (исторический)
Так выглядела типичная верстка фреймами до HTML5. Обратите внимание: у страницы с <frameset> нет тега <body> — он заменяется фреймовой структурой:
| <!DOCTYPE html>
<html> <head> <title>Пример верстки фреймами</title> </head> <frameset rows=»30%, 70%»> <frame src=»header.html» name=»header»> <frame src=»main.html» name=»main»> <noframes>Ваш браузер не поддерживает фреймы</noframes> </frameset> </html> |
Здесь страница делится на два фрейма: верхний занимает 30% высоты и загружает заголовок (header.html), нижний — 70% под основное содержимое (main.html). В новых проектах так делать не нужно — этот пример полезен, только если вам досталась поддержка старого сайта.
iframe: рабочий способ вёрстки фреймами сегодня
Тег <iframe> создаёт вложенный контекст просмотра: внутри текущей страницы открывается полноценный отдельный документ. В отличие от frameset, iframe не заменяет <body>, а вставляется в любое место обычной разметки:
| <iframe src=»https://example.com/widget»
title=»Виджет с расписанием вебинаров» width=»600″ height=»400″ loading=»lazy»> </iframe> |
Ключевые атрибуты iframe
- src — URL встраиваемой страницы; srcdoc позволяет передать HTML-код прямо в атрибуте.
- width и height — размеры в CSS-пикселях. По умолчанию, согласно MDN, фрейм получает 300 на 150 пикселей.
- title — текстовое описание содержимого. Обязателен для доступности: по нему скринридер сообщает пользователю, что находится внутри фрейма, без «проваливания» в него.
- loading=»lazy» — откладывает загрузку фрейма до тех пор, пока он не приблизится к видимой области. Ускоряет первичную загрузку страницы.
- sandbox — включает набор ограничений для встроенного содержимого: без токенов запрещено почти всё, отдельные разрешения выдаются значениями вроде allow-scripts, allow-forms, allow-popups.
- allow — задаёт Permissions Policy: доступ фрейма к камере, микрофону, геолокации, полноэкранному режиму.
- referrerpolicy — управляет тем, какой Referer передаётся при загрузке фрейма.
Безопасность iframe
Каждый <iframe> — отдельная среда документа, поэтому сторонний код внутри него изолирован от родительской страницы политикой same-origin. Три практических правила:
- Встраиваете чужой или ненадёжный контент — добавляйте sandbox и выдавайте только нужные разрешения. MDN отдельно предупреждает: сочетание allow-scripts и allow-same-origin для документа с тем же origin позволяет встроенному коду снять sandbox — защита обнуляется.
- Не удивляйтесь, если чужой сайт не открывается во фрейме: владельцы запрещают встраивание заголовками X-Frame-Options или CSP frame-ancestors — это защита от кликджекинга. Обойти её нельзя, и это нормально.
- Не плодите фреймы: каждый требует памяти и ресурсов как полноценная страница. Десяток iframe на странице — заметная просадка производительности; частично её лечит loading=»lazy».
Преимущества и недостатки
Сильные стороны фреймового подхода (сегодня это относится к iframe):
- Изоляция: сторонний виджет живёт в собственном документе и не ломает стили и скрипты основной страницы.
- Переиспользование: один и тот же виджет или форму можно встроить на несколько страниц без копирования кода.
- Независимая загрузка: содержимое фрейма обновляется без перезагрузки всей страницы.
- Быстрая интеграция: карта, видео или платёжная форма подключаются одной строкой, которую выдаёт сам сервис.
Недостатки:
- SEO: поисковые системы индексируют содержимое фрейма как отдельный документ, а не как часть вашей страницы. Ранжирующий текст внутри iframe прятать нельзя.
- Доступность: без атрибута title пользователи скринридеров вынуждены заходить внутрь фрейма, чтобы понять, что там находится.
- Мобильные устройства: фрейм с фиксированными размерами вылезает за экран; нужна адаптивная обёртка на CSS.
- Безопасность: встраивание сторонних ресурсов без sandbox открывает поверхность для атак, включая кликджекинг.
- Производительность: каждый фрейм — отдельный документ со своей загрузкой и памятью.
- Устаревание классики: frameset и frame исключены из стандарта, и строить на них новую вёрстку нельзя.
Чем заменить фреймы: современные альтернативы
Задачи, которые в 1990-е решали фреймами, сегодня закрывают штатные средства CSS и шаблонизация:
| Задача | Как решали фреймами | Современное решение |
|---|---|---|
| Раскладка страницы на области | frameset с rows и cols | CSS Grid, Flexbox |
| Меню, видимое при прокрутке | отдельный frame с меню | position: sticky или fixed |
| Общая шапка на всех страницах | frame с header.html | шаблонизатор, SSI, компоненты (React, Vue) |
| Подгрузка контента без перезагрузки | смена src у фрейма | fetch/AJAX, SPA-фреймворки |
| Встраивание карты, видео, виджета | iframe | iframe — по-прежнему стандартный способ |
Если вы осваиваете вёрстку с нуля, начинать стоит сразу с Grid и Flexbox, а прототип интерфейса удобно собирать в связке дизайн-инструментов и ИИ — как в разборе о сборке визуального прототипа приложения с помощью Figma и нейросетей.
Примеры использования iframe
- Виджеты сторонних сервисов: интерактивная карта, календарь записи, форма оплаты. iframe подключает их, не затрагивая код вашего сайта.
- Видео: плееры видеохостингов встраиваются через iframe-код, который сервис генерирует сам.
- Изоляция ненадёжного HTML: пользовательский контент можно показывать внутри sandbox-фрейма, чтобы он не выполнял скрипты на вашей странице.
А вот многостраничный сайт с «постоянным меню в отдельном фрейме» — типичный сценарий эпохи frameset — сегодня собирается иначе: раскладка на CSS Grid, общие блоки через компоненты или шаблонизатор. Рабочие процессы такой связки — от макета до кода — разбирали в статье об интеграции Claude Code в Figma для дизайнеров и разработчиков.
Частые вопросы
Работает ли frameset в браузерах в 2026 году?
Браузеры пока отображают старые фреймовые страницы ради обратной совместимости, но тег исключён из стандарта: MDN прямо предупреждает, что поддержка может прекратиться. Для новых проектов frameset не вариант.
iframe тоже устарел?
Нет. iframe входит в актуальный стандарт HTML и, по классификации MDN, относится к базовым широко поддерживаемым возможностям — работает во всех современных браузерах.
Почему сайт не открывается внутри iframe?
Владелец сайта запретил встраивание заголовком X-Frame-Options или директивой CSP frame-ancestors. Это защита от кликджекинга, обходить её не следует.
Вредят ли фреймы SEO?
Содержимое iframe индексируется как отдельный документ и не «засчитывается» вашей странице. Виджетам это не мешает, но основной текст и ссылки размещайте в обычной разметке.
Заключение
Верстка фреймами прошла путь от основной техники раскладки до узкого инструмента встраивания. Классические <frameset> и <frame> остались в истории — их место заняли CSS Grid и Flexbox. Живым остался только <iframe>: используйте его для карт, видео и сторонних виджетов, всегда с title и loading=»lazy», а для ненадёжного контента — с sandbox. Освоить современную вёрстку сейчас проще, чем когда-либо: нейросети берут на себя рутину, что видно на примере разработчика с 20-летним опытом, ускорившего работу в три раза с помощью ИИ.
- Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
- УЧАСТВОВАТЬ ЗА 0 РУБ.
- Расскажем, как получить подписку
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
