W3docs

HTML <frame> Tag

The <frame> tag was removed from HTML5 and is not rendered by any modern browser. Historical reference plus the modern replacements: <iframe> and CSS layout.

The <frame> tag (along with its container, <frameset>) was removed from HTML5 and is not rendered by any modern browser — do not use it. This page is a historical reference. If you need to embed another web page, use the <iframe> element; if you need a multi-pane layout, use CSS Grid or Flexbox instead.

Danger

<frame> and <frameset> are obsolete HTML elements. They are not part of the HTML standard and have no effect in any current browser. The sections below explain what they used to do and show the modern replacements.

What <frame> used to do

In HTML 4 and XHTML 1.0 Frameset, a single browser window could be split into independent panes. Each pane loaded its own HTML document, scrolled separately, and could be targeted by links.

The structure looked like this. The <frameset> element replaced the <body> tag and described how the window was divided: the cols attribute created vertical panes, the rows attribute created horizontal panes, and each pane's size was given in percentages or pixels. A <frame> inside it pointed at a document with the src attribute. The <frame> tag was empty (no closing tag), but in XHTML it had to be self-closed (<frame />).

Legacy example — two vertical panes (does not work today)

<!-- 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>

The <noframes> element above held fallback content for the few browsers that could not display frames. It, too, is obsolete.

Legacy example — three horizontal panes with rows (does not work today)

<!-- 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>

Modern replacements

Embed one page: <iframe>

To load another HTML document inside the current page, use the <iframe> element. Unlike <frame>, it is a regular inline element that lives in the normal page flow, so it works alongside ordinary content.

<!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>

Multi-pane layout: CSS Grid or Flexbox

The classic "header, sidebar, content" frameset layout is now built from semantic elements styled with CSS — all within a single document, so links, bookmarking, and the back button work normally.

<!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>

To learn these layout techniques, see The Ultimate Guide to Flexbox and grid-template-areas.

Why frames were superseded

Frames once let you show several documents in one window and load pages from different servers side by side. Those benefits are now better served by <iframe> and CSS layout, while the drawbacks remained fatal:

  • A URL pointed only at the frameset, so individual panes could not be bookmarked, shared, or restored with the back button.
  • Search engines indexed the framed documents in isolation, hurting SEO.
  • They created accessibility and printing problems.
  • They were removed from HTML5 and are unsupported in all current browsers.

Frames vs. iframes

The <frame> and <iframe> elements had similar behaviour, which is the main reason <iframe> is the recommended replacement. The key difference: <frame> only existed inside a <frameset> that replaced the whole <body>, whereas <iframe> is an ordinary element you drop directly into the page flow alongside other content — and, unlike <frame>, it is still part of HTML today.

Attributes (obsolete)

The whole <frame> element is obsolete, so none of the attributes below have any effect in HTML5 or in current browsers. They are listed for reference when reading legacy markup.

AttributeValueDescription
bordercolorcolorDefined the color of the border around the frame.
frameborder0, 1Defined whether the border around the frame was displayed.
longdescURLPointed to a page with a long description of the frame's content.
marginheightpixelsDefined the top and bottom margins of the frame.
marginwidthpixelsDefined the left and right margins of the frame.
nametextDefined the name of the frame, used to target it from links.
noresizenoresizeDefined whether the user could resize the frame.
scrollingyes, no, autoDefined whether the scroll bar was displayed.
srcURLDefined the URL of the page loaded in the frame.

Practice

Practice
What should you use today instead of the obsolete frame element to embed another web page?
What should you use today instead of the obsolete frame element to embed another web page?
Was this page helpful?