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 HTML standard, and is not supported in HTML5.

To have split panes:

  1. Create a page that use the frameset tag. The frameset page defines how you divide your window into panes.
  2. Inside the frameset tag you use the frame tag to specify which HTML page shows up in which pane.

In this example, our FRAMESET page is this one: 0.html. The code looks like this:

<!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 second line <frame name="lefty" src="a.html"> specifies that “a.html” is the page that should go to the first frame.

Now, we nest FRAMESET inside a FRAMESET tag, and specify that on the right column, it is to be divided into top and bottom panels. The top being 85% in height, and bottom 15%. This gives the overall effect of dividing 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. So, in our lefty pane page a.html, it has links to other pages, and each link has a target= attribute that says which pane the linked page should show.

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

To remove all frames, create a link with target="_top". Clicking on the link will remove all frames. For example: goto Xah HTML Tutorial.

The code is:

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

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!

Like what you read? Please tell friends, share link, or Buy JavaScript in Depth. Thanks.