HTML Frameset Tutorial

By Xah Lee. Date: . Last updated: .

This page shows you how to have frames (like split panes) in HTML. Each pane can load a separate HTML page.

click me to see frames

This is what the frameset should look like

html frameset 2020-06-12 mxq8k v434c
HTML4 frameset

Note: frameset is deprecated in HTML5. However, it's still supported by browsers, and likely will be forever for backward compatibility, and it is part of the HTML 4.01 Frameset standard.

Here's a example of split panes.

Create a page with the following content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "">
<title>HTML: Frameset to Split Windows</title>

<frameset cols="20%,80%">

  <frame name="lefty" src="a.html">

  <frameset rows="85%,15%">
    <frame name="topy" src="b.html">
    <frame name="bottomly" src="c.html">


The first line: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ""> is important. To use frameset, you need to use this doctype.

The line <frameset cols="20%,80%"> means the window is to be divided into 2 columns, left column is 20% width and the right 80% width.

The line <frame name="lefty" src="a.html"> specifies that “a.html” is the page that should go to the first column.

For the second column, we have another frameset that split into top and bottom row, like this:

<frameset rows="85%,15%">
  <frame name="topy" src="b.html">
  <frame name="bottomly" src="c.html">

The overall effect is splitting the window into 3 panes. A left pane, and a right top and bottom panes.

In the “frame” tag, it has a “name” attribute. So, we named our 3 panes as “lefty”, “topy”, “bottomly”. The purpose of name is that when we do a link we can specify which pane the linked page should show up.

When you have a link, you can specify which pane to show it, via the target= attribute, like this:

<a href="a.html" target="topy">A</a>

In our example,

Remove All Frames

To remove all frames, create a link with target="_top", like this:

<a href="../html_index.html" target="_top">HTML Tutorial</a>

Click here to remove all frames: HTML Tutorial .

Grid of Frames

Now, frameset needs not to be only rows or only columns, but can be a grid by specifying both. See this page for example: HTML: Frameset to Split Windows

Now, just for fun, click on 0.html and witness infinity!

See also: HTML: Iframe