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" "">
<title>HTML: Split Windows; Frameset</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 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: click Xah HTML Tutorial.

The code is:

<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!

See also: HTML: Iframe

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

Ask me question on patreon