HTML Framset 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.

If you are not seeing split panes, click here: HTML: Split Windows; 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" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>HTML: Split Windows; Frameset</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,

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: Split Windows; Frameset

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

See also: HTML: Iframe

If you have a question, put $5 at patreon and message me.