HTML Frameset Tutorial

By Xah Lee. Date: . Last updated: .

Here's how to have framesets (like split panes) in HTML. Each split pane can load a separate HTML page.

CLICK ME TO SEE FRAMES

Here's what frameset look like:

html frameset 2016-06-21
html frameset

Frameset is part of the HTML 4.01 Frameset standard. It is very popular from 1996 to 2005.

Frameset is removed in HTML5. However, it's still supported by browsers, and likely for a long time for backward compatibility.

How to Create Frameset

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>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>frameset test</title>
</head>

<frameset cols="20%,80%">
 <frame name="leftPane" src="a.html">
 <frame name="rightPane" src="b.html">
</frameset>

</html>

The first line on DOCTYPE is important. To use frameset, you need to use this doctype.

A frameset has this form:

<frameset cols="20%,80%"> <frame name="leftPane" src="a.html"> <frame name="rightPane" src="b.html"> </frameset>

It says the window is split into 2 panes side by side (like 2 columns), with width 20% and 80%.

Inside the frameset tag is a list of frame tags like this:

<frame name="frameName" src="url">

This gives a name to the pane, and says which URL to load for that pane.

When you have a link, you can specify which pane to show it, by

target=frameName

like this:

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

Split Top/Bottom

If you want to split into top/bottom panes, use the rows attribute, like this:

<frameset rows="85%,15%"> → split into top and bottom panes.

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

Nested Frames

Each occurrence of <frame …> can be replaced by a <frameset>…</frameset> to create a grid effect.

Example: HTML: Split Windows; Frameset

See also: HTML: Iframe

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