Lesson 14: The Frameset Element

Learn about HTML framesets for creating multi-pane layouts (Note: Deprecated in HTML5)

Start Learning
Previous Lesson Next Lesson

Understanding the Frameset Element

The HTML <frameset> element allows you to create a layout with multiple independent panes (frames) within a single browser window. Each frame can display a different HTML document.

Important Note: The frameset element is deprecated in HTML5 and should be avoided in modern web development. This lesson is provided for understanding legacy code. Modern alternatives include CSS layout techniques (Flexbox, Grid) and the <iframe> element.

How Framesets Work

Framesets divide the browser window into multiple sections:

  • Columns: Vertical divisions using the cols attribute
  • Rows: Horizontal divisions using the rows attribute
  • Frames: Individual containers using the <frame> element
Key Insight: Framesets were commonly used in the past for navigation menus that remained visible while content changed. Each frame functions as an independent browsing context with its own URL and history.

Creating Columns and Rows

Framesets use the cols and rows attributes to define the layout structure:

Frameset Layout Attributes
Attribute Description Values Example
cols Defines vertical columns Pixel values, percentages, or asterisk (*) cols="200,*"
rows Defines horizontal rows Pixel values, percentages, or asterisk (*) rows="100,*"

Basic Column Layout

<!DOCTYPE html>
<html>
<head>
    <title>Two Column Layout</title>
</head>
<frameset cols="30%,70%">
    <frame src="menu.html" name="menu">
    <frame src="content.html" name="content">
</frameset>
</html>

Result:

Left Frame (30%)

Menu content would appear here

  • Home
  • About
  • Contact
Right Frame (70%)

Main Content

This is where the primary content of the page would appear.

Basic Row Layout

<!DOCTYPE html>
<html>
<head>
    <title>Two Row Layout</title>
</head>
<frameset rows="100,*">
    <frame src="header.html" name="header">
    <frame src="content.html" name="content">
</frameset>
</html>

Result:

Header Frame (100px)

Main Content Area

This section takes up the remaining space below the header.

Nested Framesets

You can create complex layouts by nesting framesets within other framesets:

<!DOCTYPE html>
<html>
<head>
    <title>Nested Frameset Example</title>
</head>
<frameset cols="20%,*">
    <frame src="menu.html" name="menu">
    <frameset rows="100,*">
        <frame src="banner.html" name="banner">
        <frame src="content.html" name="content">
    </frameset>
</frameset>
</html>

Result:

Menu (20%)

Navigation menu

Banner Frame (100px)

Content Frame

Main content area below the banner

Browser Compatibility: While most modern browsers still support frames for backward compatibility, many have limited or no support for certain frame features. Always test thoroughly if working with legacy systems.

Frame Attributes

Individual frames can be customized with various attributes:

Frame Attributes
Attribute Description Values
src URL of the document to display in the frame Any valid URL
name Unique name for targeting links Alphanumeric string
scrolling Controls scrollbar visibility yes, no, auto
noresize Prevents user from resizing the frame Boolean (no value needed)
frameborder Shows or hides frame borders 1 (show) or 0 (hide)
marginwidth Left/right margins within the frame Pixel value
marginheight Top/bottom margins within the frame Pixel value

Frame Attributes in Action

<frame 
  src="content.html"
  name="main"
  scrolling="no"
  noresize
  frameborder="0"
  marginwidth="10"
  marginheight="15"
>

Result:

No Scrollbars

scrolling="no" prevents scrollbars from appearing

Fixed Size

noresize prevents users from dragging frame borders

Borderless

frameborder="0" hides the border around the frame

Targeting Frames with Links

The target attribute in anchor tags specifies which frame should display the linked content:

<!-- Menu frame content -->
<ul>
    <li><a href="home.html" target="content">Home</a></li>
    <li><a href="about.html" target="content">About</a></li>
    <li><a href="contact.html" target="content">Contact</a></li>
    <li><a href="http://example.com" target="_blank">External Site</a></li>
</ul>

Special Target Values

Target Value Description
_self Load in the same frame (default)
_blank Load in a new window or tab
_parent Load in the parent frameset
_top Load in the full body of the window
framename Load in a named frame

The noframes Element

The <noframes> element provides fallback content for browsers that don't support frames:

<frameset cols="25%,75%">
    <frame src="menu.html">
    <frame src="content.html">
    <noframes>
        <body>
            <h1>Your browser doesn't support frames</h1>
            <p>Please <a href="no-frames.html">click here</a> 
            to view the frameless version of our site.</p>
        </body>
    </noframes>
</frameset>
Modern Relevance: While virtually all browsers today support frames, the noframes element is still useful for accessibility and as a fallback for users who have disabled frames.

Modern Alternatives

Since framesets are deprecated, consider these modern approaches for similar layouts:

Frameset Alternatives
Technique Description Example
CSS Flexbox One-dimensional layout model for flexible containers display: flex;
CSS Grid Two-dimensional grid-based layout system display: grid;
Iframes Embeds another HTML page within the current page <iframe src="content.html">
AJAX Load content dynamically without full page reloads JavaScript fetch API
Single Page Apps Modern frameworks that handle content dynamically React, Angular, Vue.js

CSS Grid Example (Modern Alternative)

<div class="container">
    <nav class="sidebar">Navigation Menu</nav>
    <header class="banner">Site Banner</header>
    <main class="content">Main Content</main>
</div>

<style>
.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr;
    height: 100vh;
}
.sidebar {
    grid-row: 1 / 3;
    background: #2c3e50;
    color: white;
}
.banner {
    grid-column: 2;
    background: #2196f3;
    color: white;
}
.content {
    grid-column: 2;
    padding: 20px;
}
</style>

Practical Exercise: Create a Frameset Layout

Create a frameset-based layout for the following scenario:

Your Task:

Create a documentation site with:

  1. A top banner frame (100px height)
  2. A left navigation frame (250px width)
  3. A main content area (remaining space)
  4. Navigation links that load content in the main frame
  5. Proper noframes fallback content

Tips:

  • Use nested framesets: outer frameset for rows, inner for columns
  • Name your frames: "banner", "menu", "content"
  • Set target="content" in your navigation links
  • Include meaningful noframes content
Previous Lesson Next Lesson