HTML Frames allow for more than one web page to be displayed in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
To add frames to a page, you would first encapsulate the frames within the <frameset> element. Within the <frameset>
element, you place the self-closing (to be XHTML compliant) <frame> elements. In a Frameset document, the outermost <frameset> element takes the place of <body>
and immediately follows the start <head> element. The <frameset> element contains one or more <frameset> or <frame> elements, along with an
optional <noframes> element to provide alternate content for browsers that do not support frames or have frames disabled. A meaningful <noframes> element should always be
provided and should at the very least contain links to the main frame or frames.
Note: This article is for informational purposes only. You should avoid the use of frames because they will not likely be supported by future browsers. At the moment, frames are
only supported in HTML 4.01/XHTML 1.0 specification with a frameset doctype. XHTML 1.1 and HTML 5 do not support the use of frames.
Why use frames?
A classic example of why frames were used was when a navigation menu was placed in one frame, and content in another frame. When a
user would click a link on the menu, the web page that contained the contents would then be opened on the content frame. Here is an
example of a basic frameset with a menu frame on the left and content frame on the right. Please note that the attribute name has been deprecated. You
may want to use id in its place.
<frame name="menu" src="frame_menu.htm" />
<frame name="content" src="frame_content.htm" />
... html content ...
The frameset can be split into rows or columns. The row or column size can be set in percentages (cols="25%,75%") and pixels (cols="250,750"). In addition, one of the columns can be set to use the remaining
space, by specifying an asterisk (rows="25%,*"). In addition, you could nest
framesets within frames so that you can create a page that includes rows and
Frames can include the name attribute as shown in the example above. This can be helpful for hyperlinks that you create
in your menu.htm file so that you can add the target attribute in your hyperlinks so that the content will be displayed in the
contents frame. For example, a link in your menu file may look like this:
<a href="doc1.htm" target="content" >Doc #1</a>|
Resizing and Scrolling
The normal state of a frame allows the dragging of frame borders, allowing the user to resize the frames. You can disable
this option by adding the noresize attribute to your frames. The same applies to scrolling.
<frame name="menu" src="frame_menu.htm" noresize />|
<frame name="content" src="frame_content.htm" scrolling="no" />
Other optional attributes that you can use with frames are:
- frameborder: (0/1)-Specifies whether or not to display a border around a frame
- longdesc: Specifies a page that contains a long description of the content
- marginheight: Specifies the top and bottom margins of a frame in pixels
- marginwidth: Specifies the left and right margins of a frame in pixels
Rather than using frames, a better option is to use a server side scripting language such as asp.net or php. You will have a better control
be your last resort. While modern browsers still support the use of framesets and frames, newer HTML specifications have dropped support.
Recommended Books & Training Resources