HTML Frameset Tutorial

By Xah Lee. Date: 2005-12-26. Last updated: 2020-06-12.

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

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 is a example of split panes.

Create a page with the following content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>HTML: Frameset to Split Windows</title>
</head>

<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">
  </frameset>

</frameset>

The first line: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 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">
</frameset>

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,

a.html is for Table Of Contents.
b.html is this page you are reading.
c.html is for references.

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!