16 Frames

Contents

  1. Introduction to frames
  2. Layout of frames
    1. The FRAMESET element
    2. The FRAME element
  3. Specifying target frame information
    1. Setting the default target for links
    2. Target semantics
  4. Alternate content
    1. The NOFRAMES element
  5. Inline frames: the IFRAME element

16.1 Introduction to frames

HTML frames allow authors to present documents in multiple views. Views may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. For instance, to use three frames: one for a static banner, one for a navigation menu, and one for a main view that can be scrolled though or replaced by clicking on an item in the navigation frame.

Note: This specification includes more detailed information about frames in the section notes on frames.

Here's a simple frame document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
  <FRAMESET rows="100, 200">
      <FRAME src="contents_of_frame1.html">
      <FRAME src="contents_of_frame2.gif">
  </FRAMESET>
  <FRAME src="contents_of_frame3.html">
</FRAMESET>
</HTML>

that might create a frame layout something like this:

 ---------------------------------------
|         |                             |
|         |                             |
| Frame 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Frame 3            |
|         |                             |
|         |                             |
|         |                             |
| Frame 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------

16.2 Layout of frames

An HTML document with frames has a different makeup than an HTML document without frames. A standard document has one HEAD section and one BODY. A document with frames has a HEAD, and a FRAMESET in place of the BODY.

The FRAMESET section of a document specifies the layout of views in the main user agent window.

In addition, the FRAMESET section can contain a NOFRAMES element to provide alternate content for user agents that do not support frames or are configured not to display frames. We discuss alternate content in more detail below.

Elements that might normally be placed in the BODY element must not appear before the first FRAMESET element or the FRAMESET will be ignored.

16.2.1 The FRAMESET element

<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?)
  -- window subdivision -->
<!ATTLIST FRAMESET
  %coreattrs;                      -- id, class, style, title --
  rows    %MultiLengths; #IMPLIED  -- list of lengths. Default: 100% (1 row) --
  cols    %MultiLengths; #IMPLIED  -- list of lengths. Default: 100% (1 col) --
  onload      %Script;   #IMPLIED  -- all the frames have been loaded  -- 
  onunload    %Script;   #IMPLIED  -- all the frames have been removed -- 
  >
]]>

Start tag: required, End tag: required

Attribute definitions

rows = multi-length-list [CN]
This attribute specifies the layout of horizontal frames. It is a comma-separated list of pixels, percentages, and relative lengths. The default value is 100%, meaning one row.
cols = = multi-length-list [CN]
This attribute specifies the layout of vertical frames. It is a comma-separated list of pixels, percentages, and relative lengths. The default value is 100%, meaning one column.

Attributes defined elsewhere

The FRAMESET element specifies the layout of the main user window in terms of rectangular subspaces.

Rows and columns 

Setting the rows attribute defines the number of horizontal subspaces. Setting the cols attribute defines the number of vertical subspaces. Both attributes may be set simultaneously to create a grid.

If the rows attribute is not set, each column extends the entire length of the page. If the cols attribute is not set, each row extends the entire width of the page. If neither attribute is set, the frame takes up exactly the size of the page.

These two attributes have values that are comma-separated lists of lengths. A length may be absolute (given as a number of pixels or a percentage of the screen) or a relative length, indicated by the form "i*", where "i" is an integer. When allotting space to rows and columns, user agents allot absolute lengths first, then divide up remaining space among relative length rows or columns. The value "*" is equivalent to "1*".

Views are created left-to-right for columns and top-to-bottom for rows. When both attributes are specified, views are created left-to-right in the top row, left-to-right in the second row, etc.

The first example divides the screen vertically in two (i.e., creates a top half and a bottom half).

<FRAMESET rows="50%, 50%">
...the rest of the definition...
</FRAMESET>

The next example creates three columns: the second has a fixed width of 250 pixels (useful, for example, to hold an image with a known size). The first receives 25% of the remaining space and the third 75% of the remaining space.

<FRAMESET cols="1*,250,3*">
...the rest of the definition...
</FRAMESET>

The next example creates a 2x3 grid of subspaces.

<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...the rest of the definition...
</FRAMESET>

For the next example, suppose the browser window is currently 1000 pixels high. The first view is allotted 30% of the total height (300 pixels). The second view is specified to be exactly 400 pixels high. This leaves 300 pixels to be divided between the other two frames. The fourth frame's height is specified as "2*", so it is twice as high as the third frame, whose height is only "*" (1*). Therefore the third frame will be 100 pixels high and the fourth will be 200 pixels high.

<FRAMESET rows="30%,400,*,2*">
...the rest of the definition...
</FRAMESET>

Absolute lengths that do not sum to 100% of the real available space should be adjusted by the user agent. When underspecified, remaining space should be allotted proportionally to each view. When overspecified, each view should be reduced according to its specified proportion of the total space.

Nested frame sets 

Framesets may be nested to any level.

In the following example, the outer FRAMESET divides the available space into three equal columns. The inner FRAMESET then divides the second area into two rows of unequal height.

<FRAMESET cols="33%, 33%, 34%">
     ...contents of first frame...
     <FRAMESET rows="40%, 50%">
        ...contents of second frame, first row...
        ...contents of second frame, second row...
     </FRAMESET>
     ...contents of third frame...
</FRAMESET>

16.2.2 The FRAME element

<![ %HTML.Frameset; [
<!-- reserved frame names start with "_" otherwise starts with letter -->
<!ELEMENT FRAME - O EMPTY -- subwindow -->
<!ATTLIST FRAME
  %coreattrs;                      -- id, class, style, title --
  longdesc    %URL;      #IMPLIED  -- link to long description (complements title) --
  name        CDATA      #IMPLIED  -- name of frame for targetting --
  src         %URL;      #IMPLIED  -- source of frame content --
  frameborder (1|0)      1         -- request frame borders? --
  marginwidth %Pixels;   #IMPLIED  -- margin widths in pixels --
  marginheight %Pixels;  #IMPLIED  -- margin height in pixels --
  noresize    (noresize) #IMPLIED  -- allow users to resize frames? --
  scrolling (yes|no|auto) auto     -- scrollbar or none --
  >
]]>

Start tag: required, End tag: forbidden

Attribute definitions

name = cdata [CI]
This attribute assigns a name to the current frame. This name may be used as the target of subsequent links.
longdesc = url [CT]
This attribute specifies a link to a long description of the frame. This description should supplement the short description provided using the title attribute, and may be particularly useful for non-visual user agents.
src = url [CT]
This attribute specifies the location of the initial document to be contained in the frame.
noresize [CI]
When present, this boolean attribute tells the user agent that the frame window must not be resizeable.
scrolling = auto|yes|no [CI]
This attribute specifies scroll information for the frame window. Possible values
  • auto: This value tells the user agent to provide scrolling devices for the frame window when necessary. This is the default value.
  • yes: This value tells the user agent to always provide scrolling devices for the frame window.
  • no: This value tells the user agent not to provide scrolling devices for the frame window.
frameborder = 1|0 [CN]
This attribute provides the user agent with information about the frame border. Possible values:
  • 1: This value tells the user agent to draw a separator between this frame and every adjoining frame. This is the default value.
  • 0: This value tells the user agent not to draw a separator between this frame and every adjoining frame. Note that separators may be drawn next to this frame nonetheless if specified by other frames.
marginwidth = pixels [CN]
This attribute specifies the amount of space to be left between the frame's contents in its left and right margins. The value must be greater than one pixel. The default value depends on the user agent.
marginheight = pixels [CN]
This attribute specifies the amount of space to be left between the frame's contents in its top and bottom margins. The value must be greater than one pixel. The default value depends on the user agent.

Attributes defined elsewhere

The FRAME element defines the contents and appearance of a single view.

Setting the initial document in a frame 

The src attribute specifies the initial document the frame will contain. It is not possible for the contents of a frame to be in the same document as the frame's definition.

The following example example HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html">
      <FRAME src="contents_of_frame2.gif">
  </FRAMESET>
  <FRAME src="contents_of_frame3.html">
  <FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>

should create a frame layout something like this:

 ------------------------------------------
|Frame 1     |Frame 3       |Frame 4       |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
-------------|              |              |
|Frame 2     |              |              |
|            |              |              |
|            |              |              |
 ------------------------------------------

and cause the user agent to load each file into a separate view.

ILLEGAL EXAMPLE:
The following frameset definition is not legal HTML since the contents of the second frame are in the same document as the frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
  <FRAME src="contents_of_frame1.html">
  <FRAME src="#anchor_in_same_document">
  <NOFRAMES>
  ...some text...
  <H2><A name="anchor_in_same_document">Important section</A></H2>
  ...some text...
  </NOFRAMES>
</FRAMESET>
</HTML>

Decorating a frame 

The following example illustrates the usage of the decorative FRAME attributes. We specify that frame 1 will allow no scroll bars. Frame 2 will leave white space around its contents (initially, an image file) and the frame will not be resizeable. No border will be drawn between frames 3 and 4. Borders will be drawn (by default) between frames 1, 2, and 3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html" scrolling="no">
      <FRAME src="contents_of_frame2.gif" 
                marginwidth="10" marginheight="15"
                noresize>
  </FRAMESET>
  <FRAME src="contents_of_frame3.html" frameborder="0">
  <FRAME src="contents_of_frame4.html" frameborder="0">
</FRAMESET>
</HTML>

16.3 Specifying target frame information

Attribute definitions
target = frame-target [CI]
This attribute specifies the name of a frame where a document is to be opened.
By assigning a name to a frame via the name attribute, authors can refer to it as the "target" of links defined by other elements. The target attribute may be set for elements that create links (A, LINK), image maps (AREA), and forms (FORM).

Please consult the section on target frame names for information about recognized frame names.

This example illustrates how targets allow the dynamic modification of a frame's contents. First we define a frameset in the document frameset.html, shown here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
   <FRAME name="fixed" src="init_fixed.html">
   <FRAME name="dynamic" src="init_dynamic.html">
</FRAMESET>
</HTML>

Then, in init_dynamic.html, we link to the frame named "dynamic".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A document with anchors with specific targets</TITLE>
</HEAD>
<BODY>
...beginning of the document...
<P>Now you may advance to 
    <A href="slide2.html" target="dynamic">slide 2.</A>
...more document...
<P>You're doing great. Now on to
    <A href="slide3.html" target="dynamic">slide 3.</A>
</BODY>
</HTML>

Activating either link opens a new document in the frame named "dynamic" while the other frame, "fixed", maintains its initial contents.

Note: Once a frame's content is changed dynamically, the original frameset definition no longer reflects the true contents of each frame; the frameset definition does not change.

There is currently no way to encode the entire state of a frameset in a URL. Therefore, many user agents do not allow users to assign a bookmark to a frameset.

Framesets may make navigation forward and backward through your user agent's history more difficult for users.

16.3.1 Setting the default target for links

When many links in the same document designate the same target, it is possible to specify the target once and dispense with the target attributes in each element. This is done by setting the target attribute of the BASE element.

We return to the previous example, this time factorizing the target information by defining it in the BASE element and removing it from the A elements.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A document with BASE with a specific target</TITLE>
<BASE target="dynamic">
</HEAD>
<BODY>
...beginning of the document...
<P>Now you may advance to <A href="slide2.html">slide 2.</A>
...more document...
<P>You're doing great. Now on to 
       <A href="slide3.html">slide 3.</A>
</BODY>
</HTML>

16.3.2 Target semantics

There are several methods for making a frame the target of a link. Here we define their interaction.

  1. If an element has its target attribute set to a known frame, when the element is activated, the document designated by the element will be loaded into the target frame.
  2. If an element does not have the target attribute set but the BASE element does, the BASE element's target determines the frame, and loading obeys the same semantics as 1.
  3. If neither the element nor the BASE element refer to a target, the document designated by the element will be loaded into the frame containing the element.
  4. If any target refers to an unknown frame F, the user agent will create a new window and frame, assign the name F to the frame, and load the document designated by the element in the new frame.

User agents may provide users with a mechanism to override the target attribute.

16.4 Alternate content

We strongly recommend providing alternate versions of content for those user agents that do not support frames or are configured not to display frames.

16.4.1 The NOFRAMES element

<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">
]]>

<!ENTITY % noframes.content "(%flow;)*">

<!ELEMENT NOFRAMES - - %noframes.content;
 -- alternate content container for non frame-based rendering -->
<!ATTLIST NOFRAMES
  %attrs;                          -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: required

The NOFRAMES element specifies content that should be displayed only when frames are not being displayed. User agents that support frames must only display the contents of a NOFRAMES declaration when configured not to display frames. User agents that do not support frames must display the contents of NOFRAMES in any case.

NOFRAMES can be used either in the FRAMESET section of a frameset document or directly in the BODY of a document used within a frameset.

Suppose we have a sample frameset defined in "top.html" that designates a document ("main.html") and a special table of contents ("table_of_contents.html") related to the main document. Here is "top.html":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
   <FRAME src="main.html">
   <FRAME src="table_of_contents.html">
</FRAMESET>
</HTML>

What happens when the user reads "top.html" and the user agent is not displaying frames? The user won't see anything since we do not have a BODY in "top.html". If we insert "table_of_contents.html" and "main.html" directly in a NOFRAMES element in the FRAMESET, we solve the problem of associating the two documents, but we may cause user agents that support frames to retrieve the same data twice: one copy associated with the frameset and one copy inserted in the NOFRAMES.

It is more economical to include the table of contents at the top of "main.html" within a NOFRAMES element:

<!-- This is main.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A document with NOFRAMES</TITLE>
</HEAD>
<BODY>
<NOFRAMES>
...the table of contents here...
</NOFRAMES>
...the rest of the document...
</BODY>
</HTML>

and to link to "main.html" from "top.html" for the case when frames are not displayed:

<!-- This is top.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A frameset document with NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
   <FRAME src="main.html">
   <FRAME src="table_of_contents.html">
   <NOFRAMES>
   Here's the <A href="main.html">for a non-frames version.</A> 
   </NOFRAMES>
</FRAMESET>
</HTML>

16.5 Inline frames: the IFRAME element

<!ELEMENT IFRAME - - (%flow;)* -- inline subwindow -->
<!ATTLIST IFRAME
  %coreattrs;                      -- id, class, style, title --
  longdesc    %URL;       #IMPLIED  -- link to long description (complements title) --
  name        CDATA      #IMPLIED  -- name of frame for targetting --
  src         %URL;      #IMPLIED  -- source of frame content --
  frameborder (1|0)      1         -- request frame borders? --
  marginwidth %Pixels;   #IMPLIED  -- margin widths in pixels --
  marginheight %Pixels;  #IMPLIED  -- margin height in pixels --
  scrolling (yes|no|auto) auto     -- scrollbar or none --
  align       %IAlign;   #IMPLIED  -- vertical or horizontal alignment --
  height      %Length;   #IMPLIED  -- frame height --
  width       %Length;   #IMPLIED  -- frame width --
  >

Start tag: required, End tag: required

Attribute definitions
longdesc = url [CT]
This attribute specifies a link to a long description of the frame. This description should supplement the short description provided using the title attribute, and is particularly useful for non-visual user agents.
name = cdata [CI]
This attribute assigns a name to the current frame. This name may be used as the target of subsequent links.
width = length [CN]
The width of the inline frame.
height = length [CN]
The height of the inline frame.

Attributes defined elsewhere

The IFRAME element allows authors to insert a frame within a block of text. Inserting an inline frame within a section of text is much like inserting an object via the OBJECT element: they both allow you to insert an HTML document in the middle of another, they may both be aligned with surrounding text, etc.

The information to be inserted inline is designated by the src attribute of this element. The contents of the IFRAME element, on the other hand, should only be rendered by user agents that do not support frames or are configured not to display frames.

For user agents that support frames, the following example will place an inline frame surrounded by a border in the middle of the text.

  <IFRAME src="foo.html" width="400" height="500"
             scrolling="auto" frameborder="1">
  [Your user agent does not support frames or is currently configured
  not to display frames. However, you may visit
  <A href="foo.html">the related document.</A>]
  </IFRAME>

Inline frames may not be resized (and thus, they do not take the noresize attribute).

Note: HTML documents may also be embedded in other HTML documents with the OBJECT element. See the section on including files in HTML documents for details.