HTML Frames

Frames allow you to have multiple sections of the browser window, called frames, each showing their own .html file within the frame. This used to be common practice when trying to show separate sections of a site in separate sections of the browser window, such as a header at the top, navigation at the side, and the rest was page content that someone could scroll down without making the header and navigation disappear.

Frame sets are rarely used these days, as the introduction of server side scriping languages such as php and asp allow you to create content pages dynamically. The introduction of HTML5 has also provided new methods of doing page layouts without having to use frames.

Frame Set - <frameset> ... </frameset>
Used instead of the body tag, the frameset tag defines a group of frames. Setting the rows and cols attribute allow you to create the number of frames needed for your layout.
rows="??,??" - To set up multiple frames in rows, replace the question marks by the size of each row, either in pixels or as a percentage. A * can be used as a wild card, for instance: rows="100,*" would give you a top frame of 100 pixels high, and a bottom frame using the rest of the screen.
cols="??,??" - Similar to rows, a number of frames can be set out in columns.
border="?" - Frame border thickness in pixels.
bordercolor="?" - Colour of border between frames. (*)
Frame - <frame>
Each frame within a set will need a frame tag to tell it which web page to load in the frame. It uses the attribute:
src="url" - Filename or URL of page to show in the frame
noresize="noresize" - The frame will not be able to be resized by a visitor
scrolling="auto" - Each frame will have vertical and horizontal scroll bars appear automatically when needed. You can change this by setting the scrolling attribute to yes, no, or auto.
frameborder="auto" - Individual Frame Border. Set to 0, 1 to specify whether or not that frame must have a border.
Unframed Content - <noframes> ... </noframes>
Very old browsers are unable to display frames, and in this case we need to specify what these browsers should display instead of the frames. Even though this is not much of a problem anymore, it is still suggested that you specify unframed content when using frames. Anything between the noframes tags will not be shown in modern browsers that show framed content.

Example:

A frame example with one header row, a left & right side column, and the content in the center.

<html>
 <head>
  <title>Example - Frames</title>
 </head>
 <frameset rows="100,*">
   <frame name="top" src="frames_top.html">
   <frameset cols="50,*,50">
     <frame name="left" src="frames_left.html">
     <frame name="mid" src="frames_middle.html">
     <frame name="right" src="frames_right.html">
   </frameset>
   <noframes>
     <i>error to display to those who cannot see frames</i>
   </noframes>
 </frameset>
</html>

See live demo of this example or open in a new window. (Note: close window or tab to return to the guide)

See archived HTML Frames section from the old site.

(*) Important Note:

Tags marked with (*) should still work, but have been superseded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.