<frameset>

25 января 2023

❌ Эта статья об устаревшем теге, спецификация HTML не рекомендует использовать его в веб-разработке.

Тег <frameset> используется для разделения области окна браузера на несколько фреймов, каждый из которых отображает свою веб-страницу.

Синтаксис тега <frameset>

<frameset cols="50%,50%">
  <frame src="page1.html">
  <frame src="page2.html">
</frameset>

Спецификация HTML

Тег <frameset> является устаревшим и был удалён из HTML5. Вместо него рекомендуется использовать другие методы, такие как CSS Grid или Flexbox. Последняя версия спецификации, где упоминается этот тег, — это HTML 4.01.

Семантический или нет

Тег <frameset> не считается семантическим, так как не придаёт никакого конкретного значения содержимому. Он используется для создания разметки страницы, разбивая её на несколько областей, каждая из которых может загружать отдельный HTML-документ.

Примеры использования

Этот пример создаст две колонки: в левой колонке будет отображаться menu.html, а в правой — content.html.

<frameset cols="25%,75%">
  <frame src="menu.html">
  <frame src="content.html">
</frameset>

Здесь в верхней строке будет отображаться заголовок, а в нижней строке — две колонки. В левой окажется menu.html, а в правой — content.html.

<frameset rows="25%,75%">
  <frame src="header.html">
  <frameset cols="25%,75%">
    <frame src="menu.html">
    <frame src="content.html">
  </frameset>
</frameset>

Для чего использовать тег <frameset>

Организовать страницу сайта, когда требуется разбить информацию на несколько частей, отображаемых в одном окне браузера.
Создать сетку для отображения нескольких веб-страниц на одной странице.
Создать навигацию, которая всегда находится на месте, независимо от того, какую страницу посетитель сайта просматривает.
Разместить рекламные блоки, чтобы они всегда оставались на месте при прокрутке страницы.

Атрибуты тега <frameset>

cols — ширина и количество колонок фреймов внутри <frameset>. Например, cols="25%, 75%" создаст две колонки с шириной 25% и 75% соответственно.
rows — высота и количество строк фреймов внутри <frameset>.
border — толщина рамки вокруг фреймов.
framespacing — расстояние между фреймами.
frameborder — наличие границ вокруг каждого фрейма.
name — имя <frameset>.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <frameset> является устаревшим в HTML5 и больше не поддерживается.

Нюансы

Использование фреймов может вызывать проблемы с доступностью и SEO-оптимизацией сайта.
Все страницы, загружаемые во фреймах, должны быть доступными по отдельности.

Поддержка браузерами

Тег <frameset> поддерживается во всех современных браузерах, но не рекомендуется к использованию, так как этот тег считается устаревшим. Актуальная информация — на caniuse.

Альтернативные теги

Современная веб-разработка нацелена на использование семантических тегов и отказ от использования табличной вёрстки и фреймов в пользу более гибких и удобных способов создания макетов. Тег <frameset> можно заменить на такие теги, как <div>, <section> и другие семантические теги, в зависимости от конкретной задачи.

Чем заменить тег

Если необходимо создать набор окон на странице, то вместо <frameset> можно использовать технологии современной веб-разработки, такие как CSS Grid или Flexbox.

Пример использования CSS Grid для создания макета страницы. Здесь мы создаём три колонки, в каждую из которых можно поместить контент:

<div class="grid-container">
  <div class="grid-item">Контент 1</div>
  <div class="grid-item">Контент 2</div>
  <div class="grid-item">Контент 3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.grid-item {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 10px;
}