← Back to All Tags

<frameset>

NOT supported in HTML5

⚠️ DEPRECATED

Definition and Usage

⚠️ Not Supported in HTML5
The <frameset> tag is NOT supported in HTML5. Use modern alternatives like <iframe>, CSS Grid, Flexbox, or SPA frameworks instead.

The <frameset> tag was used in HTML 4 to define a frameset containing multiple <frame> elements. It replaced the <body> tag in documents that used frames, dividing the browser window into multiple independent sections.

Framesets allowed web developers to create layouts with fixed navigation areas and scrollable content areas. However, this approach created severe problems with accessibility, SEO, bookmarking, and mobile compatibility.

Important: The <frameset> tag has been completely removed from HTML5 and should never be used in modern web development.

Browser Support

The <frameset> tag is NOT supported in HTML5:

Chrome
Chrome
Not Supported
Firefox
Firefox
Not Supported
Safari
Safari
Not Supported
Edge
Edge
Not Supported
Opera
Opera
Not Supported

Old Usage (HTML 4)

In HTML 4, the <frameset> tag was used to define a frameset structure:

Old HTML 4 Example (Don't Use)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
  <title>Frameset Example</title>
</head>
<frameset rows="15%, 85%">
  <frame src="header.html" name="header">
  <frameset cols="20%, 80%">
    <frame src="navigation.html" name="nav">
    <frame src="content.html" name="main">
  </frameset>
  <noframes>
    <body>Your browser does not support frames.</body>
  </noframes>
</frameset>
</html>

Old Attributes (HTML 4)

Attribute Value Description
cols pixels, %, * Defined the number and size of columns in a frameset
rows pixels, %, * Defined the number and size of rows in a frameset

Note: These attributes are obsolete and no longer supported in modern HTML. They are documented here for historical reference only.

Migration Guide: Modern Alternatives

Replace framesets with these modern, standards-compliant alternatives:

1. Use <iframe> for Embedded Content

When you need to embed external pages:

Example with <iframe>

<!DOCTYPE html>
<html>
<head>
  <title>Modern Page with Iframe</title>
  <style>
    body { margin: 0; font-family: Arial, sans-serif; }
    iframe { border: none; width: 100%; height: 600px; }
  </style>
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>

  <!-- Only use iframe when truly necessary -->
  <iframe src="external-content.html"
          title="Embedded content">
  </iframe>
</body>
</html>

2. Use CSS Grid Layout

For complex multi-section layouts (RECOMMENDED):

Example with CSS Grid

<!DOCTYPE html>
<html>
<head>
  <title>Modern Grid Layout</title>
  <style>
    body {
      display: grid;
      grid-template-areas:
        "header header"
        "nav content"
        "footer footer";
      grid-template-columns: 200px 1fr;
      grid-template-rows: 80px 1fr 60px;
      height: 100vh;
      margin: 0;
      gap: 0;
    }

    header {
      grid-area: header;
      background: #333;
      color: white;
      padding: 20px;
      display: flex;
      align-items: center;
    }

    nav {
      grid-area: nav;
      background: #f0f0f0;
      padding: 20px;
      overflow-y: auto;
    }

    main {
      grid-area: content;
      padding: 20px;
      overflow-y: auto;
    }

    footer {
      grid-area: footer;
      background: #333;
      color: white;
      padding: 20px;
      display: flex;
      align-items: center;
    }

    /* Responsive design */
    @media (max-width: 768px) {
      body {
        grid-template-areas:
          "header"
          "content"
          "nav"
          "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto auto;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Website Header</h1>
  </header>

  <nav>
    <h2>Navigation</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <main>
    <h2>Main Content</h2>
    <p>This is the main content area.</p>
  </main>

  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

3. Use CSS Flexbox Layout

For simpler flexible layouts:

Example with Flexbox

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Layout</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
      margin: 0;
    }

    header {
      background: #333;
      color: white;
      padding: 20px;
    }

    .main-container {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    nav {
      width: 250px;
      background: #f0f0f0;
      padding: 20px;
      overflow-y: auto;
    }

    main {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }

    footer {
      background: #333;
      color: white;
      padding: 20px;
    }
  </style>
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>

  <div class="main-container">
    <nav>
      <h2>Menu</h2>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>

    <main>
      <h2>Content</h2>
      <p>Main content area.</p>
    </main>
  </div>

  <footer>
    <p>© 2024</p>
  </footer>
</body>
</html>

4. Use SPA Frameworks (React, Vue, Angular)

For dynamic single-page applications:

Example Concept

<!DOCTYPE html>
<html>
<head>
  <title>SPA Layout</title>
</head>
<body>
  <div id="app">
    <!-- React/Vue/Angular components render here -->
    <header-component></header-component>
    <nav-component></nav-component>
    <main-component></main-component>
    <footer-component></footer-component>
  </div>

  <!-- Framework loads and manages content dynamically -->
  <script src="app.js"></script>
</body>
</html>

Old Frameset Examples vs Modern Alternatives

Example 1: Vertical Split (Old vs New)

OLD - Frameset with Columns

<!-- DEPRECATED: Don't use -->
<frameset cols="25%, 75%">
  <frame src="menu.html">
  <frame src="content.html">
</frameset>

NEW - CSS Grid

<!-- MODERN: Use this -->
<style>
  body {
    display: grid;
    grid-template-columns: 25% 75%;
    height: 100vh;
    margin: 0;
  }
</style>

<nav>Menu content</nav>
<main>Main content</main>

Example 2: Horizontal Split (Old vs New)

OLD - Frameset with Rows

<!-- DEPRECATED: Don't use -->
<frameset rows="100px, *">
  <frame src="header.html">
  <frame src="main.html">
</frameset>

NEW - CSS Grid

<!-- MODERN: Use this -->
<style>
  body {
    display: grid;
    grid-template-rows: 100px 1fr;
    height: 100vh;
    margin: 0;
  }
</style>

<header>Header content</header>
<main>Main content</main>

Example 3: Nested Layout (Old vs New)

OLD - Nested Framesets

<!-- DEPRECATED: Don't use -->
<frameset rows="80px, *">
  <frame src="header.html">
  <frameset cols="200px, *">
    <frame src="sidebar.html">
    <frame src="content.html">
  </frameset>
</frameset>

NEW - CSS Grid Areas

<!-- MODERN: Use this -->
<style>
  body {
    display: grid;
    grid-template-areas:
      "header header"
      "sidebar content";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr;
    height: 100vh;
    margin: 0;
  }
  header { grid-area: header; }
  nav { grid-area: sidebar; }
  main { grid-area: content; }
</style>

<header>Header</header>
<nav>Sidebar</nav>
<main>Content</main>

Why Framesets Were Deprecated

  • Accessibility Nightmare: Screen readers couldn't navigate framesets effectively, violating WCAG standards
  • SEO Disaster: Search engines couldn't properly index framed content, hurting search rankings
  • Bookmarking Broken: Users couldn't bookmark specific states or pages within frames
  • URL Problems: The browser URL didn't reflect the actual content being displayed
  • Print Issues: Printing framed pages was unpredictable and often failed
  • Mobile Incompatibility: Framesets didn't work on mobile devices and small screens
  • Browser Back Button: Navigation history didn't work as users expected
  • Maintenance Hell: Required managing multiple HTML files for a single page view
  • No Responsive Design: Fixed pixel/percentage layouts couldn't adapt to different screen sizes
  • JavaScript Complexity: Cross-frame communication was difficult and error-prone
  • Security Vulnerabilities: Clickjacking and cross-frame scripting attacks
  • User Experience: Confusing scrollbars, resizing issues, and navigation problems

Usability Issues with Framesets

User Experience Problems

  • Multiple scrollbars caused confusion
  • Users couldn't resize frames reliably
  • Right-click context menu options were limited
  • Opening links in new windows was problematic
  • Browser's "Find on Page" function didn't work across frames

Developer Challenges

  • Difficult to debug across multiple frame documents
  • Complex JavaScript required for frame communication
  • No way to implement responsive design
  • CSS styling couldn't cross frame boundaries
  • Analytics and tracking were complicated

Migration Strategy

✅ Step-by-Step Migration Process:
  1. Audit Current Frameset:
    • Document all frames and their purposes
    • Map out the frame hierarchy
    • List all frame interactions and dependencies
  2. Choose Modern Architecture:
    • Single page with CSS Grid/Flexbox (recommended)
    • SPA framework for complex interactivity
    • <iframe> only for truly external content
  3. Consolidate Content:
    • Merge frame contents into single HTML files
    • Convert frame navigation to standard links or JavaScript routing
    • Combine CSS from multiple frame documents
  4. Implement Modern Layout:
    • Use CSS Grid for complex layouts
    • Use Flexbox for simpler arrangements
    • Make layout responsive with media queries
  5. Update Navigation:
    • Replace frame targets with proper links
    • Implement SPA routing if needed
    • Fix all internal links
  6. Test Thoroughly:
    • Test on multiple browsers and devices
    • Verify accessibility with screen readers
    • Check SEO with search engine tools
    • Validate responsive behavior
  7. Implement Redirects:
    • Set up 301 redirects from old frame URLs
    • Update sitemap.xml
    • Notify search engines of changes

Try it Yourself

Modern Responsive Layout

Modern CSS Grid layout (replaces old framesets):

Header
Nav
  • Home
  • About
Content

Main area

Footer

✅ Accessible, SEO-friendly, responsive, and no frames!

Related Tags