❌ Эта статья об устаревшем теге, спецификация 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;
}

Актуальность

Тег <frameset> устарел, не используйте его в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023