HTML Frames

In HTML, frames enable you present multiple HTML documents within the same window. For example, you can have a left frame for navigation and a right frame for the main content.

Frames are achieved by creating a frameset page, and defining each frame from within that page. This frameset page doesn't actually contain any content - just a reference to each frame. The HTML <frame> tag is used to specify each frame within the frameset. All frame tags are nested with a <frameset> tag.

So, in other words, if you want to create a web page with 2 frames, you would need to create 3 files - 1 file for each frame, and 1 file to specify how they fit together.

Creating Frames

Two Column Frameset

HTML Code:

The frameset (frame_example_frameset_1.html):

The left frame (frame_example_left.html):

The right frame (frame_example_right.html):

Add a Top Frame

You can do this by "nesting" a frame within another frame.

HTML Code:

The frameset (frame_example_frameset_2.html):

The top frame (frame_example_top.html):

(The left and right frames don't change)

Remove the Borders

You can get rid of the borders if you like. Officially, you do this using frameborder="0". I say, officially because this is what the HTML specification specifies. Having said that, different browsers support different attributes, so for maximum browser support, use the frameborder, border, and framespacing attributes.

HTML Code:

The frameset (frame_example_frameset_3.html):

(The left, right, and top frames don't change)

Load Another Frame

Most websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).

This is achieved using the name attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the target attribute.

Tip: You could use base target="content" at the top of your menu file (assuming all links share the same target frame). This would remove the need to specify a target frame in each individual link.

HTML Code:

The frameset (frame_example_frameset_4.html):

The left frame (frame_example_left_2.html):

The yellow frame (frame_example_yellow.html):

The lime frame (frame_example_lime.html):

Tag Reference

Here's some more info on the above tags.

The frameset Tag

In your frameset tag, you specify either cols or rows, depending on whether you want frames to go vertically or horizontally.

The frame Tag

For each frame you want to display, you specify a frame tag. You nest these within the frameset tag.

The noframe Tag

The noframes tag is used if the user's browser doesn't support frames. Anything you type in between the noframes tags is displayed in their browser.

HTML Code: