Frames

Frames are a way to subdivide the screen into distinct, addressable sections. NOTE: Only inline frames will be supported in HTML 5. Framed pages navigate easily with standard hyperlinks using the target attribute. See the older version of this page as an example. Frames are still supported by all browsers.

The frame setup information is contained in a special page of the form:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>
title of entire framed document</title>
</head>

<frameset rows|cols="pixels|#%|*,pixels|#%|*,..." frameborder="yes|no" framespacing="pixels" border="pixels" bordercolor="RGB|literal">

<frame src="url" name="frame_name" frameborder="pixels" framecolor="RGB|literal" marginheight="pixels" marginwidth="pixels" scrolling"yes|no|auto" noresize>

...
...

<noframes>
Message for browsers without frames capabilities.
</noframes>

</frameset>
</html>

The FRAMESET tag replaces the body tag.

There must be a <FRAME> or <FRAMESET> tag for each of the numbers in the ROWS or COLS attribute. The <FRAME> tag sets various attributes for the frame, loads contents and names the frame for later reference by TARGET attributes.

The <NOFRAMES> tags enclose text that will be shown to users of browsers without frames capabilities. Although this is rare with current browsers, a message should be included. A non-frames alternative page should also be considered.

There are several design considerations when creating a framed page. Some people set their browsers not allow frames and these users will not be able to view your site, or you will have to maintain parallel sites for framed and non-framed pages. The frames themselves take up valuable screen real estate limiting the amount of information that can be presented at any time. Persons using large fonts on their browsers or small screen sizes may be forced to constantly scroll vertically and horizontally to access the content, and, if you disable scrolling, may not be able to access some content. Screens with large number of frames look messy and are hard to navigate. Finally, if a link sets its TARGET attribute to _top, the new page will break out of your frameset. Unless frames provide added functionality, they should be avoided. This page is set up with frames so that the Table of Contents would always be visible. The code for the htmltutr.htm page is:

<!DOCTYPE html PUBLIC  "e-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>An HTML Tutorial</title>
</head>
<frameset ROWS="150,*">
  <frameset COLS="45%,*">
  <frame frameborder="1"  src="htmltutrtitle.htm"  title="tutorial title" name="title" noresize scrolling="no">
  <frame frameborder="0"  src="htmltutrtoc.htm" title="table of contents" name="toc" noresize>
</frameset>
  <frame SRC="htmltutrmain.htm" title="Tutorial" NAME="main">

<noframes>
 <P>
Your browser is unable to read this frames-formatted site. 
If you wish to access all of the capabilities of this site, 
you will need to upgrade your browser or set your browser 
to allow frames. To view the main Tutorial document 
click <a href="htmltutrmain.htm">here</a>.
</noframes>

</frameset>
</html>

Inline Frames

Inline frames place a seperate document inside your page. This is done with the IFRAME tag:
<iframe src="filename" {align="top|middle|bottom|left|right" scrolling="yes|no|auto" width="pixels" height="pixels" frameborder="1|0" name="frame_name"}>message if incapable of displaying frames</iframe>

NOTE: setting the Width property to 100% to autosize an IFrame to fit into a table cell works properly; however, setting the Height property to 100% only works in Chrome. There is a Javascript workaround which works in all browsers except Chrome, so both methods should be used.


This is an inline frame 300 pixels high, 500 pixels wide, with auto scrolling.


Return to Introduction Next Page

HTML Home