Фрейм это: разбираю теги frame и frameset простыми словами

Недавно взял на сопровождение корпоративный портал, построенный в 2006 году. Когда открыл исходный код, увидел конструкцию, которую давно перестали использовать в профессиональной веб-разработке: страницу с HTML-фреймами. Поисковики её почти не видели, мобильные устройства отображали криво, кнопка «назад» в браузере вела себя непредсказуемо. Но в своё время это считалось удобным архитектурным решением.

Я Андрей Зенков, с 2013 года веду веб-студию «Мельница» (melnyca.ru). В этой статье разберу, что такое фрейм простыми словами: как работает конструкция frame и frameset в HTML, для чего её применяли и почему перестали. Заодно объясню, что значит это понятие в других контекстах - в дизайне и в психологии. Слово «фрейм» одно, а смыслы в разном применении совершенно разные, и понимать их нужно отдельно.

Фрейм в HTML - это отдельная прямоугольная область в окне браузера, которая загружает независимый HTML-документ. Несколько таких областей объединяются тегом frameset и позволяют одновременно показывать разный контент в разных частях экрана без перезагрузки всей страницы.

Основная тема статьи - технология HTML-фреймов (теги frame и frameset). Термины из смежных областей (фрейм в Figma, фрейм в коммуникации) разберём отдельными блоками в конце.

Что такое фрейм: определение и контексты применения

Слово «фрейм» пришло из английского frame - рамка, кадр. В разных областях оно используется по-разному, и прежде чем погружаться в HTML-детали, полезно понять, о каком именно смысле идёт речь.

В веб-разработке фрейм - независимая прямоугольная область в окне браузера, в которой загружается отдельный HTML-документ. Это не просто визуальный блок, а полноценный контейнер с собственной полосой прокрутки, собственным URL и независимым поведением. Несколько фреймов формируют единую страницу, но каждый живёт в своём пространстве.

В дизайне (Figma и другие редакторы) фрейм это инструмент для создания рабочей области с заданными размерами устройства: телефон, планшет, десктоп. Figma-фрейм - аналог артборда с расширенными возможностями: сетки, автолейаут, прототипирование. По сути это рабочая область дизайнера, ограниченная рамкой экрана.

В психологии и маркетинге фрейм задаёт рамку интерпретации: контекст, через который люди воспринимают информацию и формируют отношение к ней. Одна и та же фраза звучит иначе в разных фреймах - «потеряете 10%» или «сохраните 90%». На нём строятся целые направления в социальных науках, а в маркетинге он определяет подачу любого сообщения.

Для понимания HTML и веб-разработки нам нужен первый смысл. Именно с ним работаем дальше. Каждый контекст живёт по своим правилам, и сложными эти понятия кажутся только пока не разберёшься, что именно перед тобой.

Как работает фрейм в HTML: тег frameset и frame

Тег frameset задаёт структуру фреймовой страницы и полностью заменяет тег body: в одном HTML-документе они не уживаются вместе. Это жёсткое ограничение - страница либо обычная (с body), либо фреймовая (с frameset).

Структуру фреймов описывает сам frameset через атрибуты rows (горизонтальные полосы) и cols (вертикальные столбцы). Значения задаются в пикселях, процентах или символом *, который означает «всё оставшееся пространство». Внутри frameset прописываются теги frame - каждый из них загружает отдельный HTML-документ в свою область. Содержимое фрейма представляет собой полноценный самостоятельный HTML-файл.

Страницы с фреймами требуют минимум трёх отдельных файлов: главный документ (index.html) содержит только frameset и описывает разметку. Из этих файлов и формируется весь видимый интерфейс. Вот минимальный рабочий пример - создавать такую страницу с вертикальным разделением несложно:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head><title>Сайт на фреймах</title></head>
<frameset cols="200px, *">
 <frame src="menu.html" name="left" noresize>
 <frame src="content.html" name="main">
 <noframes>
 <body><p>Ваш браузер не поддерживает фреймы.</p></body>
 </noframes>
</frameset>
</html>

В этом коде frameset делит экран на два вертикальных столбца. Атрибут name в теге frame задаёт имя области, а атрибут target в ссылках управляет тем, в каком именно фрейме откроется новый документ. Тег noframes выводит резервный текст для браузеров без поддержки фреймов. Вложенные frameset позволяли строить более сложные трёхпанельные макеты: шапка сверху, меню слева, контент справа - классическая компоновка корпоративных порталов 2000-х.

Атрибуты тегов frame и frameset

Атрибуты тегов frame и frameset в HTML-редакторе

Атрибуты этих тегов делятся на две группы: те, что управляют сеткой страницы (в frameset), и те, что задают поведение конкретного фрейма (в frame).

В frameset атрибут rows задает горизонтальные части страницы - верхний и нижний фреймы. Атрибут cols делит экран на столбцы: левый, правый, центральный. Значения в обоих случаях записываются через запятую: пиксели, проценты или символ * для автоматических размеров. Например, cols="25%, 75%" соответствуют четверти и трём четвертям экрана: узкая колонка под меню и широкая под основной контент.

В теге frame src указывает URL файла, который загружается в эту область. Атрибут name задаёт имя фрейма для навигации через target. Остальные атрибуты управляют внешним видом: frameborder (граница между фреймами), scrolling (поддерживает три значения: auto, yes, no), noresize (запрет на изменение размеров пользователем).

Атрибут	Тег	Значения	Что делает
rows	frameset	px, %, *	Делит страницу на горизонтальные полосы
cols	frameset	px, %, *	Делит страницу на вертикальные столбцы
src	frame	URL	Указывает документ для загрузки в фрейм
name	frame	строка	Задаёт имя фрейма (для target в ссылках)
noresize	frame	-	Запрещает пользователю менять размеры
scrolling	frame	auto/yes/no	Управляет полосой прокрутки
frameborder	frame	0 или 1	Включает или скрывает границу между фреймами
target	a (ссылка)	имя/_blank/_top	Управляет фреймом, куда откроется ссылка

Атрибут target в ссылках - главный механизм навигации. Если в меню стоит <a href="product.html" target="main">, новая страница откроется в правом фрейме с name="main", а не там, где кликнули. Именно так работает классическая схема: меню в одной панели управляет содержанием другой, и пользователь не теряет навигацию при переходах.

Пример: страница интернет-магазина с тремя фреймами

Возьмём реальный пример - каталог интернет-магазина с фреймовой структурой. Такие решения встречались у небольших онлайн-магазинов вплоть до 2010-х.

Верхний фрейм (rows первый) - шапка с логотипом и поиском. Это статичная часть, она не прокручивается вместе с контентом. С помощью атрибута noresize пользователям запрещают изменять её высоту. Нижняя полоса делится ещё на два столбца через вложенный frameset: в левом фрейме находится меню категорий, в правом - товары.

Ссылки в меню имели атрибут target="content". Без него клик по ссылке загружается в левый фрейм, где находится само меню - навигация заменялась страницей товара и пользователь терял ориентацию. Именно target перенаправлял страницу в правый фрейм с контентом. В левом фрейме оставалась только навигация, правая часть обновлялась независимо. В результате получался удобный интерфейс: вернуться к предыдущей категории можно без перезагрузки шапки и меню.

Проблема такой схемы проявлялась сразу: пользователь делился ссылкой на товар, а собеседник вернуться на эту же страницу не мог - URL не менялся. Поисковые системы видели только главный фрейм и не могли корректно индексировать товарные карточки. Так что интернет магазина на фреймах давно ушли в прошлое. Расписание обновлений каталога, отчеты по аналитике, заявки в поддержку - всё это теперь решают через обычные страницы и AJAX, без фреймовой архитектуры. Хотите предложить клиенту современное решение - фреймы даже не рассматривайте.

Плюсы и минусы HTML-фреймов

Фреймы были исключены из стандарта HTML5, поэтому для публичных сайтов их не используют. Но разобрать плюсы и минусы полезно: это помогает понять, почему веб пошёл другим путём.

Плюсы фреймов:

Навигация без перезагрузки всей страницы: меню остаётся на месте, обновляется только нужная часть экрана
Экономия трафика: статичная шапка и меню загружаются один раз для всех переходов
Удобство для внутренних инструментов: корпоративные порталы, CRM-интерфейсы, административные панели - везде, где пользователей не беспокоит SEO
Возможность подключать внешнего поставщика контента без изменения основного сайта

Минусы - и они весомее:

Поисковые системы плохо индексируют контент внутри тега frame: поисковик может привести читателя на один фрейм, а не на всю страницу целиком
Уникальные URL для каждого состояния страницы фреймы не поддерживают: адрес в браузере не меняется при переходах между разделами
Кнопка «назад» работает непредсказуемо: браузер в условиях нескольких фреймов может уйти не туда
Плохая поддержка на мобильных устройствах и планшетах: фреймы создают горизонтальный скроллинг и проблемы с масштабированием на экранах маленьких размеров
Каждый фрейм отправляет отдельный HTTP-запрос к серверу: при трёх фреймах - три запроса на каждую страницу
Доступ к контенту ограничен для вспомогательных технологий (скринридеры, правила доступности)
HTML5 исключил frameset из стандарта: все актуальные браузеры обрабатывают его как устаревший элемент, что создаёт риск несовместимости в будущих версиях

На реальных проектах в студии «Мельница» я встречал фреймы только в поддержке: клиент приносил старый сайт с задачей перенести на WordPress. Трудоёмкость переноса возрастала именно из-за фреймовой архитектуры: правильный подход требовал полного переосмысления структуры, а не просто копирования HTML. В новых проектах фреймы не используют уже больше десяти лет.

Современные альтернативы: iframe, CSS Grid и JavaScript

Современные альтернативы HTML-фреймам - iframe и CSS Grid на экране

Разработка сайтов без frameset - норма с конца 2000-х. Но задача «показать несколько независимых областей» никуда не делась. Её решают тремя инструментами, и освоите их проще, чем может показаться.

Тег iframe - встроенный фрейм, это современный элемент HTML. В отличие от frameset, iframe вставляется прямо внутрь обычной страницы с body. Это практический инструмент для встраивания внешнего контента: видео YouTube, карты Google (российский аналог - Яндекс Карты), виджеты соцсетей, демо-версии приложений. Сам тег iframe поддерживает атрибуты src, width, height и современные allow/sandbox для безопасности. Научитесь работать с iframe - и сможете встраивать отображаемые элементы практически любого внешнего сервиса.

CSS Grid и Flexbox - инструменты создания многопанельных макетов без отдельных HTML-файлов. Сетка из трёх колонок на чистом CSS занимает несколько строк кода, отображается корректно на всех устройствах и индексируется поисковиками без проблем. В студии я рекомендую именно этот подход: никаких вложенных frameset, весь контент в одном HTML-файле. Полезно запомнить: то, что раньше требовало трёх отдельных документов, теперь решается средствами CSS.

JavaScript SPA-фреймворки (React, Vue) - современный способ создать действительно интерактивный интерфейс, где разные части страницы обновляются независимо. Это и есть настоящая замена фреймам по функциональности. Группы компонентов работают как самостоятельные «фреймы», но при этом URL меняется корректно, SEO работает, мобильные версии не ломаются. Идеи, которые заложены в HTML-фреймах, помогает реализовать современный фронтенд - только без их недостатков.

Фрейм в Figma: рабочая область дизайнера

Если вы работаете с дизайном или общаетесь с дизайнерами, слово «фрейм» встретите в другом контексте - в Figma. Этот фрейм - рабочая область с заданными размерами экрана: телефон (375px), планшет (768px), десктоп (1440px) и так далее. По смыслу - артборд, но с дополнительными возможностями.

Чем этот фрейм отличается от группы в Figma - вопрос, который объясняют новичкам на каждом курсе. Группа просто объединяет элементы рисунка без жёстких границ, фрейм задаёт область с чёткими размерами и форму контейнера. Внутри фрейма работают: макетов Grid-сетки, Auto Layout (аналог Flexbox), прототипирование с переходами между экранами. Похожие инструменты в других редакторах: артборды в Sketch и Adobe XD.

Вложенные фреймы в Figma - обычная практика: фрейм телефона содержит фреймы-компоненты (шапка, карточка товара, кнопка). Интерактивных прототипов без фреймов в Figma не создашь - именно они определяют, что и куда переходит при нажатии.

Параллель с HTML-фреймами поверхностная: оба понятия описывают «контейнер с контентом», но дальше сходство заканчивается. HTML frameset - это техническая разметка страницы, Figma-фрейм - инструмент проектирования интерфейса. Разницу объясняет программа обучения любого дизайнерского курса. Выбирайте нужный контекст - и путаницы не будет.

На практике в студии я работаю с Figma-фреймами, когда дизайнер передаёт макеты для вёрстки. Понимание того, что фрейм в Figma задаёт ровно те размеры, под которые верстается страница, сильно упрощает коммуникацию и помогает быстрее согласовывать правки. Работающих макетов без этого понятия не создашь.

Эта статья основана на личном опыте автора и актуальна на момент публикации. Интерфейсы сервисов и алгоритмы поисковых систем регулярно меняются - рекомендую проверять актуальность инструкций на официальных ресурсах. Если у вас остались вопросы - задайте их в комментариях.