HTML Frames

By using frames, you can display more than one page in the same browser window.

Example

Vertical frame
This example demonstrates: how to create a vertical frame using three different documents
Horizontal frame
This example demonstrates: how to create a horizontal frame using three different documents

(More examples can be found at the bottom of this page)

Frame

By using frames, you can display more than one page in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

Disadvantages of using frames:

  • Developers must track more HTML documents at the same time
  • It is difficult to print the entire page
The frame structure tag (<frameset>)
  • The frame structure tag (<frameset>) defines how to split the window into frames
  • Each frameset defines a series of rowsOrColumn
  • The values of rows/columns specify the area occupied by each row or column on the screen

Editor's note:The frameset tag is also translated as frameset in some articles and books.

Frame tag (Frame)

The Frame tag defines the HTML document placed in each frame.

In the following example, we have set up a two-column frameset. The first column is set to occupy 25% of the browser window. The second column is set to occupy 75% of the browser window. The HTML document "frame_a.htm" is placed in the first column, while the HTML document "frame_b.htm" is placed in the second column:

<frameset cols="25%,75%">
　　 <frame src="frame_a.htm">
　　 <frame src="frame_b.htm">
</frameset>

Basic precautions - useful tips:

If a frame has visible borders, the user can drag the border to change its size. To prevent this from happening, you can add: noresize="noresize" within the <frame> tag.

Add <noframes> tags for browsers that do not support frames.

Important Note:You cannot use the <body></body> tag with the <frameset></frameset> tag at the same time! However, if you add a <noframes> tag containing some text, you must nest this text within the <body></body> tags. (You can see how it is implemented in the first example below.)

More Examples

How to use the <noframes> tag
This example demonstrates: how to use the <noframes> tag.
Mixed Frame Structure
This example demonstrates how to create a frame structure with three documents, mixing them in rows and columns.
Frame structure with noresize="noresize" attribute
This example demonstrates the noresize attribute. In this example, the frames are not resizable. When you drag the mouse over the frame borders, you will find that the borders cannot be moved.
Navigation Frame
This example demonstrates how to create a navigation frame. The navigation frame contains a list of links that target the second frame. The file named "contents.htm" contains three links.
Inline Frame
This example demonstrates how to create an inline frame (a frame within an HTML page).
Navigate to a specified section within a frame
This example demonstrates two frames. One of the frames contains a link to a specified section within another file. The section specified in the "link.htm" file is identified using <a name="C10">.
Navigate to a specified section within a frame using frame navigation
This example demonstrates two frames. The navigation frame contains a list of links, which target the second frame. The second frame displays the linked document. The links within the navigation frame point to the specified sections within the target file.