Path // www.yourhtmlsource.com → Reference → <FRAMESET> ELEMENT

<frameset> element

by Ross Shannon

DEPRECATED: The <frameset> element is obsolete and should not be used in modern web development. It was used to divide the browser window into multiple frames, each displaying a different HTML document. This element has been removed from the HTML specification and is not supported in HTML5. Use CSS Grid, Flexbox, or <iframe> for modern layouts.

Clock This page was last updated on 2025-11-17


Historical Syntax

The <frameset> element replaced the <body> element in frameset documents:

<!DOCTYPE html>
<html>
<head>
  <title>Frameset Example</title>
</head>
<frameset rows="100,*,50">
  <frame src="header.html">
  <frameset cols="200,*">
    <frame src="nav.html">
    <frame src="content.html">
  </frameset>
  <frame src="footer.html">
  <noframes>
    <p>Your browser does not support frames.</p>
  </noframes>
</frameset>
</html>

Historical Attributes

These attributes were used with the frameset element but are now obsolete:

  • rows — Defined the height of each row. Values could be pixels, percentages, or * for remaining space.
  • cols — Defined the width of each column. Similar value syntax to rows.
  • border — Width of frame borders in pixels.
  • frameborder — Whether to display borders between frames.
  • framespacing — Space between frames (Internet Explorer specific).

Example of rows/cols syntax:

  • rows="100,*" — First row 100px, second row takes remaining space
  • cols="25%,75%" — First column 25%, second column 75%
  • rows="100,*,50" — Three rows: 100px, flexible, 50px

Problems with Framesets

Framesets were deprecated for critical reasons:

  • Terrible Accessibility — Screen readers struggle to navigate between frames, making sites inaccessible to many users
  • SEO Disaster — Search engines cannot properly index frameset sites, hurting discoverability
  • Broken URLs — The browser URL never changes as users navigate within frames, breaking bookmarks and sharing
  • Navigation Nightmare — Browser history and back/forward buttons behave unpredictably
  • Printing Problems — Users cannot easily print entire pages or specific content
  • Mobile Failure — Framesets are completely incompatible with responsive design and mobile devices
  • Security Risks — Frame-based sites are vulnerable to clickjacking and other security exploits
  • Complex Maintenance — Requires multiple HTML files for what should be a single page

Modern Alternatives

CSS Grid Layout (Best for complex layouts):

<style>
  body {
    display: grid;
    grid-template-rows: 100px 1fr 50px;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "nav main"
      "footer footer";
    min-height: 100vh;
  }
  header { grid-area: header; }
  nav { grid-area: nav; }
  main { grid-area: main; }
  footer { grid-area: footer; }
</style>

<body>
  <header>Header Content</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <footer>Footer Content</footer>
</body>

Other modern approaches:

  • CSS Flexbox — Great for simpler one-dimensional layouts
  • Single Page Applications — Use React, Vue, or Angular for dynamic content
  • <iframe> — When you truly need to embed external content
  • Server-side includes — For shared components like headers and footers
  • Web Components — Create reusable custom elements

These modern approaches are accessible, SEO-friendly, responsive, and much easier to maintain.

  • <frame> — Deprecated element for individual frames
  • <noframes> — Deprecated fallback content for non-frame browsers
  • <iframe> — Modern inline frame element
  • <body> — Standard document body (what frameset replaced)