frameset (HTML element)

Description

The frameset is used to group a collection of windows together, sometimes horizontally (using the rows attribute), sometimes vertically (using the cols attribute), or even a combination of horizontal and vertical arrangements. Each child window inside the frameset is defined by the frame element.

A frameset requires a special frameset-specific doctype, and does not allow for any content inside the body of the page (the frameset actually takes the place of the body element).

The simple HTML example shown above will create a frameset with two rows, as shown in Figure 1.

It is possible to nest a frameset inside a parent frameset. Using the previous example, if we were to replace the second frame with a new frameset, that child frameset can include a further collection of frames, as detailed in the following markup:

<frameset rows="100,*">
  <frame src="header.html"/>
  <frameset cols="33%,33%,*">Nested frameset
    <frame src="subframe1.html"/>
    <frame src="subframe2.html"/>
    <frame src="subframe3.html"/>
  </frameset>
</frameset>

The result of this markup is shown in Figure 2.

Using frames/framesets can present additional difficulties for users when bookmarking pages. If you use the menu option to do this, or a keyboard shortcut, which page is it going to store as a favourite – the framed content or frameset as a whole? To be absolutely sure, the user has to right click (or CTRL click for Mac users) on the frame that needs to be added as a favourite and choose from that menu. Printing pages is also not quite as straightforward (do you want to print the whole frameset or just one portion?). Finally, navigating around the pages using keyboard only can be cumbersome, for example tabbing through navigation on one frame, then tabbing to another frame to read content, then back to the navigation frame, and so on.

An additional note about search engines – if the content is intended to be viewed within a framed context and the page comes up in search results, when the user clicks to view that page they will not see it in the context that it was originally intended – they become somewhat ‘orphaned’. You may therefore need to incorporate a ‘View this page in frameset’ link for this eventuality, which will almost certainly require some JavaScript logic to know first of all that the page is not in a frameset and secondly how to bring it back into a frameset context without losing the page.

Example

Two horizontally laid-out frames
defined by the frameset element:

<frameset rows="100,*">
  <frame src="header.html"/>
  <frame src="home.html"/>
</frameset>

Use this for…

A typical situation where you might use a frameset is when you wish some part of the content to remain constantly loaded (e.g a navigation block) in one frame and have links in that window open content in another window. It is no longer necessary, however, to use frames (and by implication framesets) for the purposes of creating the visual effect of a header that remains at the top of the page while the rest of the content scrolls – this can be carried out using Cascading Style Sheets.