This information is being maintained for archive/historical purposes only.
It will not be updated.
Please see http://archive.cabinet-office.gov.uk for details.

 

Main navigation

In section navigation

6.4 HTML frames

Publishing date: May 2002

HTML frames allow the web author to split the browsing window into a number of different sub-windows, each of which can be used to display the content of a separate HTML file.

HTML frames need to be used carefully if they are to enhance, rather than detract from, users’ experience of a website.

Use each checklist to ensure that your web pages comply with these guidelines

6.4.1 Checklist and summary: Recommended

Checklist

Summary

The use of frames in a website is a source of some contention. Some Web managers have been under the impression that they should not be used at all. Others have employed them without proper consideration for their implication for their whole user community.Frames are part of the HTML4.01 specification and the WAI, which means that they can be used by most browsers and users.

If frames are implemented correctly they can be a useful technique for designing the user interface. If used incorrectly, they can make a website incomprehensible and very difficult to navigate around.

6.4.2 Background information

Netscape introduced frames to the web in 1995 and they have since become part of the HTML standard maintained by W3C.

They give the author the ability to break up a single browser window into multiple sections, referred to as ‘frames’, each displaying a different HTML page. Each of these pages can be manipulated separately by the user, and hyperlinks in each separate frame can target another frame.

The development of frames made it easier for Web managers to incorporate a corporate look and feel into websites. On a standard webpage an organisation’s logos and navigational areas will usually be displayed at the very top. This is fine until a user has to scroll down a page to retrieve some information. When the page scrolls down, the logo and navigational area will disappear from the browser screen.

The following screen-shots show how this is rendered within a web browser:

view screenshots showing the use of frames

Using frames, the designer can ensure that both of these elements remain visible, when the user scrolls down the page displayed in the main content frame.

The main content pages within the website need only contain the substantive data because all the organisation and navigation information is contained within the non-scrolling frame(s). The following illustration shows how a departmental name and logo will always be displayed within a browser, even when the page has been scrolled downwards:

View screenshot showing the use of frames part 2

Using frames to build websites in this way has been popular. It has eliminated the need to repeat section within pages and helped browsers avoid repetitive rendering of graphics. However, there are potential problems with this approach:

Many of these issues, such as bookmarking and printing, have become easier with the development of more advanced browsers. Use of the right-hand mouse button allows particular pages to be specified for both functions.

Scripting techniques can also be used to improve the usability of websites that use frames. For example, it is possible to have a script in each page that detects whether it is being displayed outside of the intended frames set-up and, if so, re-establishes the required frameset. This technique can be used to resolve the problem of user’s bookmarking or following links to individual HTML pages that would otherwise be displayed out of the frames context.

Important: It is often said that a user, in any given website, is only three clicks away from an unpleasant external website. Given this it is extremely important that any website that uses frames should ensure that all links to websites outside its control should be launched outside the frame environment.

Unfortunately, many problems with the implementation of frames remain and careful management of the website is needed in order to avoid the potential snags.

Important: In a website that uses frame it is essential that all documents within the website contain all of the navigational elements. Users with browsers that cannot render frames will still use these elements to get around the website. However, these same documents can be used in the frames website but users will benefit from the extra navigational aids that can be implemented as a result of the use of frames.

There are a number of pros and cons in the use of frames. Each must be considered before using them in an organisation’s website

6.4.3 Implementation

Not all browsers can display frames, some because they were released before were invented and others, such as screen readers and digital TV, because they just do not work with them. For this reason, a noframes version of the website must always be provided for users.

The first document of the website, (the one usually called index.htm or default.htm) establishes the frames environment. This page is not actually displayed to the user: it just sets the frame structure used by the rest of the website. It is this page that places the website’s title in the browser’s window title bar and divides the screen up into the frames with in which subsequent HTML pages are displayed.

The following is a basic introduction to the HTML attributes that should always be used in a frames environment.

6.4.3.1 Frameset

This HTML tag establishes a frames environment. It specifies the dimensions of each of the frames to be set-up with either percentage or fixed pixel values. A frameset element may specify that the users’ display window is to be divided up either row-wise or column-wise. Frameset elements may be nested in order to divide the display window both row- and column-wise.

The attributes used with this element are all marked up in the standard HTML way (ie, attribute=”value”, with each attribute and value pair separated by one or more spaces).

rows=”30%,20%,*”

In this example three frame windows are established in percentages of the viewable screen area. The first window is given 30 per cent, the second 20 per cent and the third set to the asterisk character which means it is to fill whatever is left of the display window after the specified frame sizes have been set up.

cols=”200,100,*”

In this example three frame windows are established in columns of fixed pixel values. The first window is given 200 pixels, the second 100. The size of the third column is set to the asterisk character, which specifies that it is to fill whatever is left of the display window after the specified frame sizes have been set up.

6.4.3.2 Frame

This element is used to specify which page should be loaded from the website and displayed within each of the frames established by a frameset element. Each frame should be given an individual identifier or name. The name of a frame is quite separate from the frame’s title attribute and from any setting of the HTML title element inside an HTML file that is displayed with the frame.

src=”top.htm”

Each frame must have a URL attribute. The browser will load the resource at the URL into the frame. The URL can be either relative or absolute.

name=”top”

Each frame should be given an individual identifier. This is used to target hyperlinks between pages and frames.

Title=”This is the navigational frame”

This title attribute and value will help accessibility browsers identify different frames to their users. Using these correctly will enable users of accessibility technologies to orientate themselves to your website’s design and functionality.

scrolling=”no”

This attribute instructs the browser to turn off the scrolling bars within that specific frame. Other available values are “yes”, which displays the scrolling bar, and “auto”, which only shows the scroll bar if the information contained in the frame is larger than the displayable area.

noresize

This attribute prevents the user from being able to resize the frame by grabbing the visible frame divider and dragging it across the screen.

marginheight=”20” / marginwidth=”15”

These two attributes control the size of the margin depth around a given frame. In this example the frame data would only be displayed after a vertical gap of 20 pixels and a horizontal gap of 15 pixels.

frameborder=”0”

This attribute controls the border size of each of the frames. In this example, the value of zero means the frame will not display a frame border.

6.4.3.3 Noframes

It is essential that this element be used when a frames environment is chosen for an organisation’s website. Many browsers do not understand frames, so if this tag is not included on the frame set-up page the browser will display nothing at all.

Web browsers are programmed to display only the contents of HTML elements that they recognise and to ignore any elements that they do not. The noframes element has a body element nested immediately within it so a browser that does not understand frames will recognise the content of the noframes element as what it will consider to be the body element of a legitimate HTML page. On the other hand, a frame-capable browser will read and display all of the frames data and will ignore everything contained within the noframes element.

6.4.3.4 Target

The target attribute may be added to any hypertext link (href element) to instruct browsers to load the object of the hyperlink into the frame whose name is specified as the value of the target attribute.

Specifying a name of a frame (the name given to it on its frame element) will make the object of the hyperlink load into that frame. Specifying a value that does not match the name of any frame element will cause the object to load into a new browser window, which will be created with the specified names.

There are a number of other special values for the target attribute:

6.4.4 Example

The examples below will illustrate how frames should be implemented.

For illustrative purposes each of the individual frames have its own background colour so that is immediately obvious which page has been placed in which frame. All hotkey attributes and styling by Cascading Style Sheets have been deleted from the example to simplify the illustration of the frame commands.

6.4.4.1 side.htm

This page contains all the navigation elements within the website. It will have a light red background colour and will be displayed along the left-hand side of the browser. Each of the hyperlinks uses the target=”display” attribute and value to ensure that each linked document appears in the correct frame.

Only frames-capable browsers will ever use this page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html>
<head>
<title>Side</title>
</head>

<body bgcolor="#ffccff">

<h3>Nav Bar</h3>
<p><a href="home.htm" target="display">Homepage</a></p>
<p><a href="info.htm" target="display">Organisation Information</a></p>
<p><a href="whatsnew.htm" target="display">What's New</a></p>
<p><a href="sitemap.htm" target="display">Sitemap</a></p>
<p><a href="contact.htm" target="display">Contact</a></p>
<p><a href="search.htm" target="display">Search</a></p>
<p><a href="help.htm" target="display">Help</a></p>

</body>
</html>

6.4.4.2 top.htm

This document will be displayed across the top of the browser and will have a light yellow background. Its only content will be the organisation’s title.

Only frames-capable browsers will ever use this page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html>
<head>
<title>Top</title>
</head>

<body bgcolor="#ffffcc">

<h1>Department X</h1>

</body>
</html>

6.4.4.3 home.htm

This document will take up the majority of the browser screen, will have a lime background colour and will display the substantive content of the website. This and all subsequent pages that are displayed in this frame should also contain the basic navigational elements. This will ensures that users of browsers that do not display frames will be able to navigate the website.

Only frames-capable browsers will ever use this initial page. This information is replicated in the <noframes> area of the index.htm file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html>
<head>
<title>Home</title>
</head>

<body bgcolor="#66ff66">

<p>
<a href="home.htm">Homepage</a> | <a href="info.htm">Organisation Information</a> |
<a href="whatsnew.htm">What's New</a> | <a href="sitemap.htm">Sitemap</a> | <a
href="contact.htm">Contact</a> | <a href="search.htm">Search</a> | <a
href="help.htm">Help</a>
</p>

<h2>Display Area</h2>
<p>This is the main area that all documents and links to documents will be displayed</p>

</body>
</html>

6.4.4.4 index.htm - frame setup page

If a website did not use frames, this page would normally be the website’s homepage. In a website that uses frames, it contains the frameset, frame and noframes elements.

This example shows the frames structure established by the frameset element.

The index.htm page instructs the browser to display three pages, side.htm, top.htm and home.htm. A number of attributes are used to specify margin width, border width, size of frame, etc.

The information contained within the noframes element will only be displayed if a user’s browser does cannot use frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html>
<head>
<title>Example of Frames</title>
</head>

<frameset cols="23%,*">
<frame name="sidebar" src="side.htm" marginwidth="5" marginheight="0" scrolling="no" frameborder="1"
noresize title="Navigational Area">
<frameset rows="18%,*">
<frame name="logo" src="top.htm" marginwidth="10" marginheight="10" scrolling="no" frameborder="0"
noresize title="Department X logo">
<frame name="display" src="home.htm" marginwidth="5" marginheight="5" scrolling="auto" frameborder="0"
noresize title="Main Display Area">
</frameset>
</frameset>

<noframes>
<body bgcolor="#ffffff">

<p>This information will only be displayed if your browser cannot read frames.</p>

<p>
<a href="home.htm">Homepage</a> | <a href="info.htm">Organisation Information</a> |
<a href="whatsnew.htm">What's New</a> | <a href="sitemap.htm">Sitemap</a> | <a href="contact.htm">Contact</a< |
<a href="search.htm">Search</a> | <a href="help.htm">Help</a>
</p>

<h1>Department X</h1>

<h2>Display Area</h2>
<p>This is the main area that all documents and links to documents will be displayed</p>
</body>
</noframes>
</html>

6.4.4.5 Basic concept of page construction

The combination of HTML pages are held together by the frame setup page (index.htm). The illustration below shows how the four separate HTML frame documents given in this section relate to each other, combining to complete the window displayed by the web browser.

view schemata of frame setup page

6.4.4.6 View on a frames-capable browser

The example frame setup will be rendered as follows on a frames-capable browser.

For illustrative purposes Microsoft’s Internet Explorer 4 has been used. Each of the frames can be seen.

Example frame setup (frames-capable-browser)

6.4.4.7 View on a non-frames-capable browser

The same HTML page (index.htm) when viewed on a non-frames-capable browser looks very different. The browser ignores all of the elements it does not understand and only the data contained within the noframes element is displayed.

Example frame setup (non-frames-capable-browser)

Further, more detailed instructions on using and implementing frames within a website can be found in the W3C HTML4.1 specification.

HTML 4.01 specification from W3C

In section navigation