HTML тег <frame>

Тег <frame> (вместе со своим контейнером, <frameset>) был удалён из HTML5 и не отображается ни одним современным браузером — не используйте его. Эта страница является исторической справкой. Если вам нужно встроить другую веб-страницу, используйте элемент <iframe>; если вам нужна многопанельная разметка, используйте вместо этого CSS Grid или Flexbox.

Опасно

<frame> и <frameset> — это устаревшие элементы HTML. Они не являются частью стандарта HTML и не имеют никакого эффекта в современных браузерах. В разделах ниже объясняется, для чего они раньше использовались, и показаны современные замены.

Для чего раньше использовался `<frame>`

В HTML 4 и XHTML 1.0 Frameset одно окно браузера можно было разделить на независимые панели. Каждая панель загружала собственный HTML-документ, прокручивалась независимо и могла быть целью ссылок.

Структура выглядела следующим образом. Элемент <frameset> заменял тег <body> и описывал, как делилось окно: атрибут cols создавал вертикальные панели, атрибут rows — горизонтальные, а размер каждой панели задавался в процентах или пикселях. Элемент <frame> внутри него указывал на документ с помощью атрибута src. Тег <frame> был пустым (без закрывающего тега), однако в XHTML он должен был быть самозакрывающимся (<frame />).

Устаревший пример — две вертикальные панели (не работает сегодня)

<!-- HISTORICAL ONLY: this renders nothing in modern browsers -->
<!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="page-left.html">
    <frame src="page-right.html">
    <noframes>
      <body>Your browser does not support frames.</body>
    </noframes>
  </frameset>
</html>

Элемент <noframes> выше содержал резервный контент для немногочисленных браузеров, которые не могли отображать фреймы. Он тоже является устаревшим.

Устаревший пример — три горизонтальные панели с `rows` (не работает сегодня)

<!-- HISTORICAL ONLY: this renders nothing in modern browsers -->
<!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%,30%,40%">
    <frame src="top.html">
    <frame src="middle.html">
    <frame src="bottom.html">
  </frameset>
</html>

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

Встраивание страницы: `<iframe>`

Чтобы загрузить другой HTML-документ внутри текущей страницы, используйте элемент <iframe>. В отличие от <frame>, это обычный строчный элемент, который существует в обычном потоке страницы, поэтому он работает рядом с обычным содержимым.

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

Многопанельная разметка: CSS Grid или Flexbox

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

<!DOCTYPE html>
<html>
  <head>
    <title>Modern layout</title>
    <style>
      body {
        margin: 0;
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 60px 1fr;
        grid-template-areas:
          "header header"
          "sidebar main";
        height: 100vh;
      }
      header { grid-area: header; background: #222; color: #fff; }
      nav    { grid-area: sidebar; background: #eee; }
      main   { grid-area: main; padding: 1rem; overflow: auto; }
    </style>
  </head>
  <body>
    <header>Site title</header>
    <nav>Sidebar links</nav>
    <main>Main content goes here.</main>
  </body>
</html>

Чтобы изучить эти техники разметки, см. Полное руководство по Flexbox и grid-template-areas.

Почему фреймы были вытеснены

Фреймы позволяли показывать несколько документов в одном окне и загружать страницы с разных серверов рядом. Эти преимущества теперь лучше реализуются с помощью <iframe> и CSS-разметки, тогда как недостатки оказались критическими:

URL указывал только на frameset, поэтому отдельные панели нельзя было добавить в закладки, поделиться ими или восстановить с помощью кнопки «Назад».
Поисковые системы индексировали документы во фреймах по отдельности, что ухудшало SEO.
Они создавали проблемы с доступностью и печатью.
Они были удалены из HTML5 и не поддерживаются ни в одном современном браузере.

Фреймы и iframe

Элементы <frame> и <iframe> имели схожее поведение — это главная причина, по которой <iframe> является рекомендуемой заменой. Ключевое отличие: <frame> существовал только внутри <frameset>, который заменял весь <body>, тогда как <iframe> — это обычный элемент, который вставляется прямо в поток страницы рядом с другим содержимым, и, в отличие от <frame>, он по-прежнему является частью современного HTML.

Атрибуты (устаревшие)

Весь элемент <frame> является устаревшим, поэтому ни один из перечисленных ниже атрибутов не имеет никакого эффекта в HTML5 или в современных браузерах. Они приводятся для справки при чтении устаревшей разметки.

Атрибут	Значение	Описание
bordercolor	color	Определял цвет границы вокруг фрейма.
frameborder	0, 1	Определял, отображалась ли граница вокруг фрейма.
longdesc	URL	Указывал на страницу с подробным описанием содержимого фрейма.
marginheight	pixels	Определял верхний и нижний отступы фрейма.
marginwidth	pixels	Определял левый и правый отступы фрейма.
name	text	Определял имя фрейма, используемое для его указания в ссылках.
noresize	noresize	Определял, мог ли пользователь изменять размер фрейма.
scrolling	yes, no, auto	Определял, отображалась ли полоса прокрутки.
src	URL	Определял URL страницы, загружаемой во фрейм.

Практика

Что следует использовать сегодня вместо устаревшего элемента frame для встраивания другой веб-страницы?

Элемент iframe.Элемент frameset.Элемент noframes.Ничего — frame по-прежнему работает в современных браузерах.

Для чего раньше использовался <frame>