W3docs
ru
Войти

HTML тег <frameset>

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

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

Опасно

Теги <frameset> и <frame> являются устаревшими HTML-тегами. Они были удалены из HTML5 и не должны использоваться на новых страницах. HTML5-документ (начинающийся с <!DOCTYPE html>) не может использовать фреймсет вообще. Данная страница описывает устаревший элемент и объясняет, что использовать вместо него.

Эта страница рассказывает о том, что делал <frameset>, почему он устарел, и о современных доступных заменах: макетах CSS Grid и Flexbox для разделения страницы на панели, а также элементе <iframe> для встраивания другого документа.

Почему <frameset> устарел

Фреймсеты были исключены из веб-платформы, поскольку они нарушали фундаментальное поведение браузера и создавали проблемы с доступностью. Основные недостатки:

  • Нарушение навигации, закладок и истории. Адресная строка показывала только URL внешнего фреймсета, но никогда не документ внутри фрейма. Пользователи не могли добавить в закладки или поделиться тем, что они реально просматривали, а кнопка «Назад» работала непредсказуемо.
  • Нарушение печати. При печати фреймсета обычно выводился не тот фрейм или пустая страница, поскольку не существовало единого документа для печати.
  • Проблемы с доступностью. Программы чтения с экрана испытывали затруднения при передаче того, что страница состоит из нескольких независимых документов; пользователи клавиатуры могли застрять при переключении фокуса между фреймами, а порядок фокусировки был непоследовательным.
  • Безопасность (кликджекинг). Загрузка произвольных страниц во фреймы открывала возможность для атак типа кликджекинг. Современные сайты защищаются от этого с помощью заголовков X-Frame-Options и Content-Security-Policy, которые нередко полностью запрещают загрузку внутри фрейма.
  • Удалено из HTML5. По всем перечисленным причинам спецификация HTML5 полностью отказалась от фреймсетов.

Доступность

Фреймсеты враждебны вспомогательным технологиям (AT). Программа чтения с экрана представляет один документ за раз, поэтому окно, состоящее из нескольких фреймов, не имеет естественного порядка чтения — пользователи вынуждены самостоятельно обнаруживать фреймы и переключаться между ними, практически не понимая, как они связаны. Клавиатурная навигация также страдает: порядок обхода клавишей Tab через границы фреймов ненадёжен, а фокус может застрять во фрейме, из которого сложно выйти. Ни одна из этих проблем не существует в едином, хорошо структурированном HTML5-документе, оформленном с помощью CSS.

Синтаксис

Тег <frameset> используется парами. Содержимое записывается между открывающим (<frameset>) и закрывающим (</frameset>) тегами.

Тег <frameset> может содержать один или несколько тегов <frame>. При необходимости разделить окна на ещё меньшие допускается вкладывать один тег <frameset> в другой.

Совет

Документ с фреймсетом использует элемент <frameset> вместо элемента <body>. Элемент frameset не может содержать никакого контента — вместо этого он определяет и именует фреймы, расположенные в строках и/или столбцах.

Пример HTML-тега <frameset>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <frameset cols="50%,50%">
    <frame src="https://www.w3docs.com/learn-html/html-basic.html">
    <frame src="https://www.w3docs.com/learn-css/css-syntax.html">
  </frameset>
</html>
Попробуйте сами »

Результат

A browser window split into two equal columns by a frameset, each column showing a different web page

Пример HTML-тега <frameset> с атрибутом rows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <frameset rows="30%,40%,30%">
    <frame src="https://www.w3docs.com/learn-javascript.html">
    <frame src="https://www.w3docs.com/learn-git.html">
    <frame src="https://www.w3docs.com/learn-php.html">
  </frameset>
</html>
Попробуйте сами »

Современные замены

Всё, что делал <frameset>, теперь реализуется лучше с помощью CSS и <iframe>.

Разделение страницы на панели (CSS Grid)

Чтобы разделить один документ на боковую панель, заголовок и область контента — классический сценарий использования фреймсета — используйте CSS Grid. Это единый документ, поэтому навигация, закладки, печать и программы чтения с экрана работают нормально.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Two-pane layout with CSS Grid</title>
    <style>
      body { margin: 0; }
      .layout {
        display: grid;
        grid-template-columns: 200px 1fr;
        height: 100vh;
      }
      .sidebar { background: #f4f4f4; padding: 1rem; overflow: auto; }
      .content { padding: 1rem; overflow: auto; }
    </style>
  </head>
  <body>
    <div class="layout">
      <nav class="sidebar">Sidebar</nav>
      <main class="content">Main content</main>
    </div>
  </body>
</html>

Гибкий макет из строк и столбцов можно также создать с помощью Flexbox.

Встраивание внешней страницы (<iframe>)

Чтобы загрузить отдельную веб-страницу внутри вашего документа — единственная возможность <frame>, которую CSS не предоставляет, — используйте <iframe>. В отличие от фреймсетов, iframe является допустимым элементом HTML5, сохраняет URL родительской страницы доступным для закладок и поддерживает изолирование (sandboxing) в целях безопасности.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Embedding with an iframe</title>
  </head>
  <body>
    <h1>My page</h1>
    <iframe
      src="https://www.w3docs.com/"
      title="W3docs home page"
      width="600"
      height="400">
    </iframe>
  </body>
</html>

Всегда указывайте для <iframe> описательный атрибут title, чтобы вспомогательные технологии могли сообщить о его назначении.

Атрибуты

В реальном фреймсете стандартными были только два атрибута: rows и cols.

АтрибутЗначениеОписание
colsпиксели, %, *Определяет количество и размер столбцов фреймов. Удалён в HTML5.
rowsпиксели, %, *Определяет количество и размер строк фреймов. Удалён в HTML5.

Примечание: В HTML 4.01 атрибут frameborder можно было задавать как у <frameset> (в качестве значения по умолчанию для его фреймов), так и у каждого отдельного <frame>. Атрибут framespacing был нестандартным расширением Netscape/Internet Explorer и никогда не входил в спецификацию HTML. Оба атрибута устарели и не должны применяться.

Элемент <frameset> также поддерживал глобальные атрибуты.

Практика

Практика
Почему не следует использовать элемент HTML frameset на новых страницах?
Почему не следует использовать элемент HTML frameset на новых страницах?
Практика
Какой современный элемент заменяет фреймсет при встраивании отдельной внешней страницы?
Какой современный элемент заменяет фреймсет при встраивании отдельной внешней страницы?
Was this page helpful?