Framesets
Framesets allow you to have more than one page displayed as if they were one page, above each other or beside each other. It is also possible to nest framesets so that some pages are displayed above others, and some are displayed beside others. In addition, pages contained within a frameset can also contain framesets of their own.
Generally, framesets are not a good solution. If all you want to do is to use frames to force your page into a particular layout, then you are using them for the wrong purpose, you should be using CSS. Framesets exist for a very specific purpose. If you have a single page that has the navigation, and you want to keep that page visible at all times, then you can consider using a frameset (although it is much better to put the navigation on every page). With a frameset, you can display the navigation in one frame, and have it open pages inside another frame. The navigation would remain visible no matter what page was being viewed.
Framesets have several problems. They are a general problem for users that cannot view framesets, such as those who use a speech reader, as they make it very difficult to work out exactly what page the user is viewing. They are a problem for normal users because they cannot be bookmarked - users who try to bookmark individual pages only end up with a bookmark for the overall frameset, so the bookmark cannot open the correct page. Then they are also a problem for users who arrive at the linked pages via a search engine, as they cannot get back to the frameset to see the navigation (even if they can reopen the frameset, they usually lose the page they were looking at in the process).
Generally, I advise you not to use framesets. If you choose to use them, make sure that these limitations will not cause problems.
Pages that contain framesets should use the frameset document type declaration as shown on the document structure. Pages within framesets that use the target attribute on links or forms should use the transitional document type declaration.
The frameset element
Framesets are defined using the FRAMESET tag (which also requires a closing tag). This must have the ROWS or COLS attribute specified to say how the frames should be arranged. If you specify rows, the frames will be laid out top to bottom in the order that you define them. If you specify cols, the frames will be laid out left to right. If you specify both rows and cols, the frames will be layed out in a grid from left to right, one row at a time from top to bottom.
The ROWS and COLS attributes expect a comma separated list of frame sizes. The sizes can be
written in a variety of different ways. These are; just numbers (representing the number of pixels), percentages
(representing a percentage of the available space), and the asterisk. The asterisk tells it to use whatever is still
available after laying out the other frames. In addition, you can specify multiplication factors when combined with an
asterisk (such as 2*), so that if more than one frame uses it, they will have the appropriate share of the
available space.
For example, a COLS value of "200,30%,*,2*" would create four columns. Assuming there
is 1000 pixels available; the first column would be 200 pixels wide. The second would be 300 pixels wide. This would
leave 500 pixels free for the remaining columns. The third column will be half the size of the fourth, so the third column
would be 167 pixels wide, and the fourth would be 333 pixels wide.
The FRAMESET element replaces the BODY element from a normal document. In frameset documents, there is no BODY element.
The frame element
Frames are defined using the FRAME tag, which does not have a closing tag. This must have the SRC attribute specified to say what page should be displayed in the the frame. The format of the SRC attribute is exactly the same as a HREF attribute of a link, with the exception that it can only load other pages. It cannot link to anchors within the current page. It can load other pages from the current site, or from other sites.
As well as the frame attribute, there are a few other things that you can specify. By default, users can resize frames to make them larger or smaller. This is a good thing, since their screen may be too small for your layout, and they may need to change the sizes. If you have a specific need to prevent them from doing that, you can set the NORESIZE attribute (this is the type of attribute where you do not have to give it a value, just write the attribute inside the tag).
Most browsers will also show a thin border between frames so that the frames are visually separated. To remove this
border, and make the framed pages display without anything separating them, set the frameborder="0"
attribute on both frames on either side of the border.
The last of the important attributes is the NAME attribute. This is used to set a target that can be used by links and forms inside in pages inside the frames. The name should be a name that makes sense to you, and for the sake of simplicity, try to use just letters and numbers (it can actually contain any characters, but some browsers will display these names when frames are disabled, so it helps if other people can understand them).
It is also possible to use attributes to specify if the frames can be scrolled, or the margins of the body element
in the contained document. However, these are display related, so they should be controlled using CSS (set the
overflow:hidden; style, and the margin and padding on the HTML and BODY elements).
It is very important to make sure you provide the correct number of frames according to the number or rows and columns. It is even more important to make sure that no frame loads the parent page, or you will end up with an infinitely nested frameset, and you may cause poorly designed browsers to hang up or crash.
Nested framesets
It is possible to use another frameset tag instead of a frame. This should then contain its own frames within it.
Noframes
To allow you to cater for browsers that do not support frames, or users that are unable to use them, you should always provide a noframes section inside your frameset. This should be placed inside the outermost frameset tag, usually at the end of it. It can contain almost anything that a normal document's BODY can contain.
This is not the place where you tell people to get a better browser. They will already be well aware that their browser does not support frames, and you can be quite sure that they will have their reasons for using what they use. The NOFRAMES element is where you give alternative content. Often this will be a list of links to the pages held inside the frames, or a sitemap giving them links to the pages they may want to visit. You could also use this part of the page to help to give them the overview they are missing without being able to use the frameset.
A complete example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Database access</title>
</head>
<frameset rows="100,*">
<frame src="header.html" frameborder="0" noresize>
<frameset cols="100,*">
<frame src="nav.html" name="navigation" frameborder="0">
<frame src="main.html" name="mainpage" frameborder="0">
</frameset>
<noframes>
<h1>The Database</h1>
<p>This gives access to the database contents.</p>
<ul>
<li><a href="header.html">Database summary</a></li>
<li><a href="nav.html">Database sections</a></li>
<li><a href="main.html">Database overview</a></li>
</ul>
</noframes>
</frameset>
</html>Opening links in other frames
Pages in a frameset can cause links or forms to open in other pages in the frameset by using the TARGET attribute. The value of the attribute should match the name of the desired frame. Note that in most browsers, a page can only target a frame that comes from the same site. Using the example above, pages in the navigation could use this to target the main frame:
<a href="foo.html" target="mainpage">There are also some extra targets that it can use, even though they are not defined as frame names:
- _parent
- This will load the page in place of the page that is holding the current page in a frameset. This means that the frameset will be removed, and the new page will be loaded instead.
- _top
- This will load the page in place of the topmost page that is holding the current page in a frameset. Even if there are multiple levels of nested frameset pages, they will all be replaced with the new page, so there are no longer any framesets.
Inline frames
There is another type of frame, known as an inline frame. This can be used just like an image, and can be inserted anywhere in the normal flow of text and inline content. To insert an inline frame, use the IFRAME element. This is a little like the FRAME element, in that it uses the SRC attribute to set the location of the page to load. It is also possible to set the WIDTH, HEIGHT, and FRAMEBORDER attributes, but these are usually better done with CSS, setting the width, height, and border styles.
Unlike the FRAME element, the IFRAME has its own fallback content for when inline frames cannot be displayed. The IFRAME has a closing tag, and anything inside the iframe before the closing tag will be used if the inline frame itself cannot be rendered. It can contain anything that is block or inline. Perhaps just some text, or perhaps a list of links to resources. Whatever is appropriate for your purpose.
<iframe src="news.html" name="innerframe">
<ul>
<li><a href="news.html">News page</a></li>
<li><a href="access.html">Accessibility notes</a></li>
</ul>
</iframe>Pages that use inline frames should use the transitional document type declaration.
Last modified: 4 September 2008