Did you find this useful?
Socialize it today.


HTML Framesets and Frames

Monday, February 20, 2012

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.


<frameset cols="25%,75%">
<frame name="menu" src="frame_menu.htm" />
<frame name="content" src="frame_content.htm" />
</frameset>
<noframes>
<body>
... html content ...
</body>
</noframes>

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 columns.

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

Frame replacement?

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 and more flexibility to add windows and dynamic content to your pages. Alternatively, you can also use javascript. The use of framesets and frames should be your last resort. While modern browsers still support the use of framesets and frames, newer HTML specifications have dropped support.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS: The Complete Reference HTML CSS and JavaScript Editor