When HTML frames were first introduced into Netscape 2 and IE 2.1, they were often criticized as ugly, slow and unmanageable. Thankfully, today’s browsers have come along way with their implementation of frames, and if properly used, frames can help to make a site more attractive and easier to navigate.
For example, a site can use one small frame for its navigation menu, with the main content displayed in a second, larger frame. The navigation frame remains the same while the main content frame changed to display the different content pages.
HTML frames can also be used in an arty way to position graphic elements on the screen.
The two tags used to create a framed site are
<frame>. The first of these,
<frameset>, is placed at the top of your site, where you would normally put a
<body> tag. The second tag,
<frame>, is used to specify each frame within the frameset. In addition, you can put further
<frameset> tags within the outer
<frameset>, so you can have nested frames.
To simplify things, we’re not going to cover the whole
<frame> syntax here; just the options that are most often used.
Let’s take a look at the
<frameset> tag first:
<frameset rows|cols="a,b,c,..." border=n frameborder="1|0" framespacing=n> . . . </frameset>
All the attributes are optional except the
The first attribute,
cols, specifies whether the frameset will consist of frames lined up in rows or columns. (To create a frameset containing both rows and columns, you need to nest framesets inside the main frameset — see the frameset examples section at the bottom of the page.)
cols attributes also allow you to specify how those rows or columns will appear within the frameset. Each of the rows/columns is specified in turn, separated by commas. Each value can take one of the following four forms:
- The row/column will be n pixels deep/wide
- The row/column will take up n% of the width/height of the parent window/frame
- The row/column will take up whatever space is available to it
- The row/column will take up proportionately n times as much space as a row/column defined with *
border attribute allows you to specify the width (in pixels) of the borders between the frames in the frameset. The default on most browsers is 5 pixels wide.
frameborder attribute specifies whether the frames will have borders or not. Often it is nice to have seamless frames, as in the Online Japery frameset — this option allows you to turn off frame borders altogether with
frameborder=0. Note that this will not always produce borderless frames in all browsers, as they all have additional settings which can result in flat-colour borders between frames! To be safe, specify
framespacing attribute specifies the width between frames in pixels, and hence the border width; effectively the same as the
Now let’s take a look at the HTML
<frame src="frame-source" name="frame-name" scrolling="yes|no|auto" frameborder="1|0" noresize marginwidth="n" marginheight="n"> . . . </FRAME>
All the attributes are optional.
Here’s how these frame attributes work:
- Specifies the content of the frame – usually an HTML page. For example,
<frame src="main.html">will create a frame which displays the page
main.html. It’s always a good idea to specify a source for each frame, although you don’t have to.
- Allows you to associate a name with each frame in the frameset. This is necessary to target frames (see the linking between HTML frames section). Example:
- Selects whether the frame will have scrollbars in it. A value of
"yes"means it will always have scrollbars;
"no"means it never has scrollbars; and
"auto"means it will have scrollbars only if the frame’s content is too big to fit in the frame.
- This works like its equivalent in the
framesettag, and allows you to turn the border off or on for individual frames (the border will only turn off between two adjacent frames if they both specify
- If present, this attribute means that the user cannot resize the frame by dragging the frame border around.
- These control how much space appears between the edges of the frame and the frame’s content, in pixels. If they’re not specified, default values are used (approx. 10 pixels, though different browsers have different defaults!).
Take a look at some of the frameset examples at the end of this page to see how the
<frame> tags work together.
Linking between HTML frames
Often you want to have a hyperlink in a document in one frame that opens a document in another frame. For example, one frame might be a navigation or menu frame, containing links to pages that should be opened in another frame.
So how’s it done? Easy. You add the attribute
target to the
<a> tag to specify the name of the frame to open the page in. You did give each frame a name, right? 🙂
For example, say your frameset has two frames, called
menu frame has a
menu.html. You have a link in your
menu.html page to a page called
services.html, that you want to appear in the
main frame. This is how you do it:
<a href="services.html" target="main">Our Services</a>
This link, when placed in the
menu.html page, will cause the page
services.html to be opened in the
There are some special values that you can use for
target. These are:
- The page will be loaded into the frameset containing the current frame (for nested framesets).
- The page will replace the topmost frameset, i.e. load into the whole browser window. Great for replacing one whole frameset with another.
- The page will be loaded into a brand new browser window, causing a new window to open.
- The page will always load into the same frame as the link is in. This is the default target anyway, but the default can be overridden by specifying the line
<base target="frame-name">in the page’s
Linking to other sites within frames
When linking to external sites from within your frameset, it’s considered good netiquette to load the external page into the main browser window using
Coding for frameless browsers
It’s a good idea when using HTML frames to provide an alternative page for early browsers that don’t use frames, even if that page just says “get a newer browser!”. If you don’t do this, older browsers will just display a blank page, and people will think your site doesn’t exist!
You provide an alternative page by using the
</noframes> tags before your
</frameset> tag. Frame-aware browsers will ignore everything between these tags, while older browsers will go ahead and display the content. For example:
. . . <noframes> <p>Spoil yourself - get a new browser!</p> </noframes> </frameset>
Some frameset examples
Let’s have a look at a couple of sample framesets, along with the HTML that makes them.
1. The “menu-on-the-left” frameset
This is a pretty common frameset, where the page is split into two columns. The narrow left hand column contains graphic or text links to pages which appear in the right hand column. This neat approach means that, for smallish sites, all of the site content can be accessed via the links in the left hand frame.
View the frameset. (Use your browser’s Back button to return here.)
<html> <head> <title>"Menu on the left" example</title> <frameset cols="140,*"> <frame name="menu" src="menu.html"> <frame name="main" src="welcome.html"> </frameset> </html>
2. A three-framed frameset
This example uses nested framesets to display two menu frames, one along the top and one down the right-hand side.
View the frameset. (Use your browser’s Back button to return here.)
<html> <head> <title>"Three-frame" example</title> <frameset cols="*,150"> <frameset rows="104,*"> <frame name="top" src="top.html" noresize scrolling=no marginheight=5 marginwidth=5> <frame name="main" src="welcome.html" noresize scrolling=auto marginheight=5 marginwidth=5> </frameset> <frame name="right" src="right.html"> </frameset> </html>
I hope you found this tutorial helpful! Soon you’ll be creating beautiful framed websites. Good luck!