How frames work
Frames in HTML use the <FRAMESET>, <FRAME>, and <NOFRAMES> tags, and the TARGET attribute of the <A> tag.
Last modified: 6/5/98
Any discussion of frames is more productive with an understanding of how frames are produced using HTML. This material is provided for reference; minimal familiarity with HTML is necessary to understand it.

(If you already understand the <FRAMESET> and <FRAME> tags, and most importantly the "TARGET" attribute of the <A> tag, then you already know what is covered on this page.)

This tutorial about frames:
•   Explains the HTML concepts behind frames
•   Gives an example
•   Shows the HTML source
•   Shows where some problems occur

Frames are HTML's windowing system
Frames are an HTML feature. They take advantage of browsers' ability to break the screen up into multiple rectangular areas, each with independent scrolling text. This page, for example, has two frames: one on the left with a blue rough paper background and the Good Documents logo, and one containing the text you are reading right now. When you scroll this frame, the other one does not scroll.

Framesets and Targeting
To follow the discussions about what is good and bad about different uses of frames, there are a few features that you need to understand. Those features include Framesets and Targeting.

Normal HTML pages have a <BODY> tag and include text and images to be displayed. The URL you use to refer to the page refers to a file with that tag. The files usually have the file extension ".htm" or ".html".

Pages with frames also are referenced by a URL pointing to a file with the file extension ".htm" or ".html", just like normal HTML pages. What is different is that the file defining that page does not have a <BODY> tag, nor text and images. Instead, the file has <FRAMESET> and <FRAME> tags that define the layout of the frames that make up the page. An optional <NOFRAMES> tag is sometimes used to provide alternate text for viewing in browsers that do not display frames. This file with the frame definitions can be called a frameset file.

The actual bodies of the frames, the text and images, are stored in separate files referenced by the <FRAME> tags in the frameset file. These pages are normal HTML files, with <BODY> tags, or other frameset pages. So a framed "page" is made up of multiple files, some of which could be normal pages on their own if they weren't in a frame.

An example
To help understand the details of how frames work, let's set up an example.

This example consists of four files: home.htm, framepage.htm, leftborder.htm, pagebody.htm, and pagebody2.htm.

The "home.htm" page has a single link, pointing to the "framepage.htm" page. Here is how it appears when viewed in a browser:



Clicking on the "Frame Page" link displays the "framepage.htm" page, which shows up as two frames, one getting its text from "leftborder.htm" and the other from "pagebody.htm":



Clicking on the "Page 2" link in the left frame will change the right frame to contain the contents of "pagebody2.htm":



Clicking on the "Home" link in the left frame will change the entire browser window to display the contents of "home.htm":



Here is a diagram showing the relationship among the files:



Notice how the links behave in different ways. The "Frame Page" link displays a new frameset. The "Home" link displays a normal page, taking over the entire browser window. The "Page 2" link changes the contents of the right-hand frame. The "Page 1" link changes the contents of the right-hand frame back to what is in "pagebody.htm" instead of "pagebody2.htm".

You can experiment with the real files yourself.
Use your browser's Back button to come back here!
Start with home.htm.

The contents of the files
home.htm is a normal HTML page. It consists of a link to the frame page, framepage.htm:

<HTML>
<HEAD>
<TITLE>Home</TITLE>
</HEAD>
<BODY>
<B>Home Page</B>
<P>This is the home page.</P>
Go to <A HREF="framepage.htm">Frame Page</A>.
</BODY>
</HTML>

framepage.htm is a frameset page. It defines a frameset with two frames, one on the left, 150 pixels wide, containing the contents of file "leftborder.htm" and named "left", and one on the right containing, initially, the contents of file "pagebody.htm", named "body":

<HTML>
<HEAD>
<TITLE>A Page With Frames</TITLE>
</HEAD>
<FRAMESET COLS="150,*">
 <FRAME SRC="leftborder.htm" NAME="left">
 <FRAME SRC="pagebody.htm" NAME="body">
 <NOFRAMES>Only frame capable browswers
    can see this page. </NOFRAMES>
</FRAMESET>
</HTML>

leftborder.htm is a normal HTML page, and is displayed as the contents of the left frame. What distinguishes it from other HTML pages is that the links (the <A> tags) include a "TARGET" attribute. The TARGET attribute specifies the frame in which to display the URL specified by the HREF attribute. The value of the TARGET attribute may be either the name of a frame window or one of a few special values, including "_top" which says to take over the entire browser window (i.e., stop being in this Frameset). The names of the frames are specified in the <FRAME> tag of the Frameset. The contents of leftborder.htm are:

<HTML>
<HEAD>
<TITLE>Left border</TITLE>
</HEAD>
<BODY>
<B>Navigation:</B>
<BR><BR>
<A HREF="home.htm" TARGET="_top">Home</A><BR>
<A HREF="pagebody.htm" TARGET="body">Page 1</A><BR>
<A HREF="pagebody2.htm" TARGET="body">Page 2</A>
</BODY>
</HTML>

Finally, pagebody.htm and pagebody2.htm have basically the same content. They say which page they are, and then have a long numbered list to make the frame contents long enough to scroll on most computer screens. They are normal HTML files with <BODY> tags. Here is pagebody.htm:

<HTML>
<HEAD>
<TITLE>Body Page Number 1</TITLE>
</HEAD>
<BODY>
<B>Body Page Number 1</B>
<P>This is the first page. We will make it long.</P>
<OL>
<LI>A<LI>B<LI>C<LI>D<LI>E<LI>F<LI>G<LI>H<LI>I<LI>J
<LI>A<LI>B<LI>C<LI>D<LI>E<LI>F<LI>G<LI>H<LI>I<LI>J
<LI>A<LI>B<LI>C<LI>D<LI>E<LI>F<LI>G<LI>H<LI>I<LI>J
<LI>A<LI>B<LI>C<LI>D<LI>E<LI>F<LI>G<LI>H<LI>I<LI>J
<LI>A<LI>B<LI>C<LI>D<LI>E<LI>F<LI>G<LI>H<LI>I<LI>J
<LI>A<LI>B<LI>C<LI>D<LI>E<LI>F<LI>G<LI>H<LI>I<LI>J
<LI>A<LI>B<LI>C<LI>D<LI>E<LI>F<LI>G<LI>H<LI>I<LI>J
</OL>
</BODY>
</HTML>

What's special here?
You will notice that most of the contents of these files are just like any normal HTML files. The only parts that are different are the <FRAMESET>, <FRAME>, and <NOFRAMES> tags in the "framepage.htm" file, and the TARGET attributes of the <A> tags of the "leftborder.htm" file.

By having TARGET attributes that have the name of one of the frames ("body" in this case, referring to the right-hand frame), one frameset page is able to switch the text being displayed in the browser window without changing the frameset itself, nor the contents of another frame (the "left" frame in this case). It is this use of frames, where the frameset stays constant while the contents changes, that is most often the source of complaints about frames.

What is wrong with this use? The problem with switching contents without changing the frameset is that the Netscape and Microsoft 3.0 and 4.0 browsers leave the URL in the Address or Location toolbar displaying the URL of the original frameset, so bookmarks and other links always bring you back to the original configuration. This means that you are likely to have pages that cannot be linked to directly from outside of the frameset itself. Having pages that cannot be linked to is considered bad for a variety of reasons, not the least of which is that you cannot mail the URL to someone else nor refer to it in other documents.

If you have a separate frameset file for each configuration of files in frames, and always use TARGET="_top" to get to these separate framesets, you will not have this particular problem.

Many problems with frames stem from missing or incorrect use of the TARGET attributes of links. Good use of frames comes from careful HTML coding or sometimes from the use of automatic HTML generation from authoring tools such as Trellix, Microsoft FrontPage, and NetObjects Fusion, or automatic generation by a web server.