Revised: December 31, 2008

Frames

The simplest use of frames divides the window into two rectangular windows, with each of the smaller windows capable of displaying a unique web page.  The dimensions of these windows, their appearance, and what page initially is displayed in each window is defined by another file.  This third file has the following tags in it in this order:

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>

In other words, the <frameset> and the <frame> tags go where the <body> tag would go in a conventional page. 

<FRAMESET> Tag

The <FRAMESET> tag defines whether the page is to be divided into rows or columns and the size of the rows and columns, in either absolute (pixel) or percentage terms.  For example, 

<FRAMESET ROWS="250, *"> divides the window into two rows, the first 250 pixels high, with the latter the rest of the window.
<FRAMESET COLS="20%, 80%"> divides the window into two columns.
<FRAMESET COLS="250,2*,*"> divides the window in three columns, the first 250 pixels wide, with the remaining space devoted to the remaining two columns, with the second column twice as big as the third column
<FRAMESET ROWS="250,*" COLS="20%, 80%"> divides the window into two rows and two columns (specifying both rows and columns however is rarely done)

The default is for frame borders to be displayed.  In most applications, the page will look better if they are turned off.  To do this, include the following attributes in the frameset tag: FRAMEBORDER=0 FRAMEBORDER=no.  The multiple specifications are required so to achieve this effect in earlier versions of both Internet Explorer and Netscape.  If the border is turned on, the width of the border in pixels can be specified by using the BORDER attribute.

<FRAME> Tag

The <FRAME> tag specifies with its SRC attribute the file that is to be initially loaded into that frame.  This reference can be either an absolute or relative reference. 

All the other attributes of the <FRAME> tag are optional.  These include:

<FRAME NAME="left" SRC="nav.html">
<FRAME NAME="right" SRC="content.html">

Within the file nav.html, the links would be written like <A HREF="file1.html" TARGET="right">Link to file 1</a>

Clicking on this link would load the file1.html into the right frame.  If one has a number of links within a page and the target for each is the same, one can use the <BASE> tag to specify the default target rather than specifying the target attribute in each link.  For example, in the above case, one would say <BASE TARGET="right"> at the top of the document, or between the <HEAD></HEAD> tags.  Specification of the TARGET attribute in a particular link would override any specification of the default target in the <BASE> tag.

There are 4 reserved names which one can use with the TARGET attribute (don't forget the underscore):

TARGET="_blank" open a new window
TARGET="_self" opens a link within the same window from which is is called (this is the default)
TARGET="_parent" opens a link in the the parent frame.  This only works when the nested framesets are in different documents as opposed to a single document.  If used at the top, equivalent to _self.  
TARGET="_top" opens a link into the full browser window, but not a new window

If you are using frames and linking to sites outside of your web site, I think it is better to load the new site into the full browser window, and hence one would use the target="_top" or target="_blank" attribute in the link.  

If one uses specifies a target which is not a name specified in a frameset, the effect is to have the page specified in the link loaded into a new window, just as if target="_blank" were specified.  However, if other links also use this same target, clicking on the other links will load the specified page(s) into the window that was opened with the first use of this name, rather than opening a new window each time a link is clicked, which would be the effect had target="_blank" been specified.  Using such a common name is useful to minimize the number of open windows.  

Nested Framesets

For example, if one wanted a row across the top, and then two columns below that, one could could write the frameset as follows:

<FRAMESET ROWS="40,*">
    <FRAME SRC = ...>
    <FRAMESET COLS="10%,*">
    <FRAME SRC = ...>
    <FRAME SRC = ...>
    </FRAMESET>
</FRAMESET>

An alternative way of nesting frames is to have the src attribute specify a frameset (as noted above, this permits use of the _parent keyword).

Advantages and Disadvantages of Frames

Advantages:
  1. Frames enable part of the visible screen to remain constant, where the other part scrolls.  This is useful if you want to keep some things constantly in view of the user, e.g., links to other parts of your website, that would otherwise scroll off the page.
  2. Similarly, frames provide a way to have part of the window remain constant when the user follows a link
  3. Putting the navigational element in a frame enables the navigation to be removed from a number of pages and stored in a separate file.  This means changes to this code can be made in one file rather than in every file containing this code segment which makes changes much easier to implement.  This code reuse also reduces storage requirements and loading times.  (There are other ways to utilize common code segments that do not utilize frames.  Server-side includes can be used so that the server inserts in the web page code from another file.  Some HTML editors also provide for easy maintenance of a code segment common to several files -- e.g. Dreamweaver's library feature and FrontPage's shared borders feature.)
  4. Frames provide a way to keep some things associated with the previous page when a new page is loaded.  For example, if music is playing on one page, and a new page is loaded, the music stops.  If one wants to load a new page, but have the music keep playing, one could use frames and have the music associated with a frame that stays constant when a new page is loaded into the other frame.  Click here for an example of this.
  5. Frames facilitate dividing responsibility for different parts of the window to different people.  Similarly, different parts of the window can be hosted on different servers.

Disadvantages:

  1. When using frames, when one follows a link and loads a new page, the address shown in the location bar remains the same, unless one uses the TARGET="_top" attribute and loads a new frameset.  This makes it hard to know where you are and difficult to provide the address of a specific page within a site.  The latter can be done by right-clicking and selecting properties.
  2. This same effect makes bookmarking difficult in older browsers.  In Internet Explorer 5 and later, particular combinations of a web page in one frame and another web page in another frame are bookmarked (a favorite is created) without any problem.  However, even in current versions of Netscape and Firefox, this does not appear to be possible. 
  3. Although the amount of common material (navigation bar, company logos, etc.) need not affected by whether frames are used, frame sites tend to be associated with increased amounts of common material (perhaps due to the efficiency of putting such common material in frames).  In some sites, the common material occupies a lot, arguably too much, screen space.
  4. Coding mistakes (such as loading a frame into the wrong window) are common with frames.
  5. There are 3 versions of XHTML1.0 - XHTML-1.0-Strict, XHTML-1.0-Transitional, and XHTML-1.0-Frameset. XHTML-1.0-Frameset provides for frames and also includes deprecated tags and attributes such as bgcolor that are found in XHTML-1.0-Transitional but not XHTML-1.0-Strict. Thus for validation purposes, it does not appear to be possible to easily validate a frameset document according to the standards of XHTML-1.0-Strict.

Nonissues:

  1. Accessibility - Although several books contain statements that frames present serious difficulties with regards to accessibility, this appears not to be true with recent screen readers.  All that is needed is that the frame be titled to facilitate frame identification and navigation.

Examples of Frames in Commercial Sites

Single frameset with 2 frames - Navigational bar at top Alamo Rental Car, National Rental Car, some of the sections of the Fidelity site

Nested framesets - Wizardry 8

<noframes> tag

After the <frameset> ,,, </frameset> portion of the document, one can include a <noframes></noframes> pair.  One can include material within the latter pair for browsers that don't understand frames.  Since browser support for frames began with Netscape 2 and Internet Explorer 3, this isn't much of an issue any longer.  However, search engines may have problems with frames, so if one has navigational links within a frame, including a link within the <noframes></noframes> section to the file containing these links will help the search engine get to the content of the site. (Niederst, Web Design in a Nutshell, First Edition, p. 221) 

Comments to William Pegram, bill@billpegram.com