HTML Guides for frame

The <frame> element is obsolete, so the content each frame loads has to move into the page itself or into an <iframe> inside a normal <body>.

A <frame> only works inside a <frameset>, where it loads a separate HTML file into one pane of the browser window. The validator reports this message once for every <frame> on the page, and the <frameset> around them gets a message of its own. Moving the frames into a <body> doesn't help: the parser drops a <frame> there and reports it as a stray start tag. The frames and the frameset have to be replaced together, and when the frameset only wraps another site in a single frame, an HTTP redirect to that site replaces both.

What replaces each frame depends on what it holds. A header or menu that every page shares belongs in the page itself, written directly or pulled in with a server-side include or a template, so it lives at the same URL as the content around it. A document that has to stay separate can load in an <iframe>. Iframes take src and name just as frames did, so links with a matching target keep loading into them, and the validator stops warning that name is never allowed on <frame>. Give each iframe a title describing what it shows, since screen readers announce it.

The presentation attributes of a frame don't carry over. On an <iframe>, frameborder, scrolling, marginwidth and marginheight are obsolete too, and the validator warns about each one. Remove the border with border: 0 in CSS. Scrollbars and margins belong to the document loaded inside, so set overflow and margin in that document's own stylesheet. noresize needs no replacement, since an iframe has no draggable border between panes.

Invalid example

A header frame above a catalog frame:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Garden supplies</title>

</head>

<frameset rows="80,*">

<frame src="header.html" scrolling="no" noresize frameborder="0">

<frame src="catalog.html" frameborder="0">

</frameset>

</html>

Valid example

The header is part of the page (on a real site it would come from an include), and the catalog keeps loading from its own file in an iframe:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Garden supplies</title>

<style>

iframe {

width: 100%;

height: 80vh;

border: 0;

}

</style>

</head>

<body>

<header>

<a href="/">Garden supplies</a>

</header>

<iframe src="catalog.html" name="catalog" title="Product catalog"></iframe>

</body>

</html>

The <frameset> element is obsolete, so a page split into frames has to become a normal page with a <body>, using CSS for the layout and <iframe> or server-side includes for the shared parts.

A frameset document has a <frameset> where the <body> would go, and each <frame> inside it loads a separate HTML file into one pane of the window. The HTML standard lists <frameset>, <frame> and <noframes> as obsolete. Browsers still render framesets so old sites keep working, but the validator reports the <frameset> once and then each <frame> and <noframes> with a message of its own. The rows and cols attributes go away with the element and aren't reported separately.

Frames cause trouble beyond validation. The address bar keeps showing the frameset's URL whatever is loaded inside it, so a visitor can't bookmark or share a specific page, and search engines can send people straight to a framed page without the navigation that was meant to surround it.

The fix depends on what the frames were for. When they hold shared navigation, the usual answer is one complete page per URL, with the navigation pulled in on the server through an include, a template or a static site generator. When a pane really has to load other documents, an <iframe> inside a regular <body> does that job, sized with CSS and given a title so screen readers can announce it. A frameset with a single frame that fills the window, such as rows="100%,*", is often the "masked forwarding" a domain registrar sets up to show another site under a different domain. In that case, replace it with an HTTP 301 redirect to the real site.

Invalid example

A manual with a table of contents on the left and the chapter on the right:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Product manual</title>

</head>

<frameset cols="25%,75%">

<frame src="contents.html">

<frame src="chapter-1.html">

</frameset>

</html>

Valid example

The table of contents moves into the page, and an <iframe> loads each chapter that its links target:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Product manual</title>

<link rel="stylesheet" href="manual.css">

</head>

<body>

<nav>

<ul>

<li><a href="chapter-1.html" target="chapter">Chapter 1</a></li>

<li><a href="chapter-2.html" target="chapter">Chapter 2</a></li>

</ul>

</nav>

<iframe src="chapter-1.html" name="chapter" title="Chapter text"></iframe>

</body>

</html>

body {

display: flex;

height: 100vh;

margin: 0;

}

nav {

flex: 0 0 25%;

}

iframe {

flex: 1;

border: 0;

}

The iframe keeps the two-pane layout, but every chapter still shares one URL. Publishing each chapter as its own page, with the table of contents included on the server, gives every chapter an address people can bookmark and link to.