← Back to All Tags

<frame>

NOT supported in HTML5

⚠️ DEPRECATED

Definition and Usage

⚠️ Not Supported in HTML5
The <frame> tag is NOT supported in HTML5. Use <iframe>, CSS layouts (Flexbox, Grid), or modern JavaScript frameworks instead.

The <frame> tag was used in HTML 4 to define a single window (frame) within a <frameset>. It allowed developers to divide a browser window into multiple independent sections, each displaying a different HTML document.

Frames were commonly used for creating navigation menus that remained visible while the content area changed. However, this approach created numerous problems for accessibility, SEO, and user experience.

Important: Modern web development practices strongly discourage the use of frames. They have been completely removed from HTML5 and are not supported by modern web standards.

Browser Support

The <frame> 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 <frame> tag was used within a <frameset> to define individual frames:

Old HTML 4 Example (Don't Use)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
  <title>Frame Example</title>
</head>
<frameset cols="25%, 75%">
  <frame src="menu.html" name="menu">
  <frame src="content.html" name="content">
  <noframes>
    <body>Your browser does not support frames.</body>
  </noframes>
</frameset>
</html>

Migration Guide: Modern Alternatives

Replace frames with these modern, accessible alternatives:

1. Use <iframe> for Embedded Content

For embedding external pages or content:

Example with <iframe>

<!DOCTYPE html>
<html>
<head>
  <title>Modern Layout</title>
</head>
<body>
  <h1>Main Page</h1>

  <!-- Embedded content -->
  <iframe src="embedded-page.html"
          width="100%"
          height="500"
          title="Embedded content">
  </iframe>
</body>
</html>

2. Use CSS Flexbox Layout

For flexible, responsive layouts:

Example with Flexbox

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      margin: 0;
      height: 100vh;
    }

    .sidebar {
      width: 25%;
      background: #f0f0f0;
      padding: 20px;
      overflow-y: auto;
    }

    .content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <nav class="sidebar">
    <h2>Navigation</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <main class="content">
    <h1>Main Content</h1>
    <p>This is the main content area.</p>
  </main>
</body>
</html>

3. Use CSS Grid Layout

For complex, two-dimensional layouts:

Example with Grid

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: grid;
      grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
      grid-template-columns: 200px 1fr;
      grid-template-rows: auto 1fr auto;
      height: 100vh;
      margin: 0;
    }

    header { grid-area: header; background: #333; color: white; padding: 20px; }
    .sidebar { grid-area: sidebar; background: #f0f0f0; padding: 20px; }
    .content { grid-area: content; padding: 20px; }
    footer { grid-area: footer; background: #333; color: white; padding: 20px; }
  </style>
</head>
<body>
  <header>
    <h1>Website Header</h1>
  </header>

  <nav class="sidebar">
    <h2>Menu</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </nav>

  <main class="content">
    <h2>Content Area</h2>
    <p>Main content goes here.</p>
  </main>

  <footer>
    <p>Footer content</p>
  </footer>
</body>
</html>

4. Use JavaScript SPA Frameworks

For dynamic content loading without page refresh:

Example Concept (React/Vue/Angular)

<!DOCTYPE html>
<html>
<head>
  <title>SPA Example</title>
</head>
<body>
  <div id="app">
    <nav>
      <!-- Navigation that updates content without reload -->
      <button onclick="loadPage('home')">Home</button>
      <button onclick="loadPage('about')">About</button>
    </nav>

    <main id="content">
      <!-- Dynamic content loaded here -->
    </main>
  </div>

  <script>
    function loadPage(page) {
      // Fetch and load content dynamically
      fetch(`/api/${page}`)
        .then(response => response.text())
        .then(html => {
          document.getElementById('content').innerHTML = html;
        });
    }
  </script>
</body>
</html>

Why Frames Were Removed

  • SEO Issues: Search engines had difficulty indexing framed content properly
  • Bookmarking Problems: Users couldn't bookmark specific content states
  • Browser Back Button: Navigation history didn't work as expected
  • Printing Difficulties: Frames made it hard to print pages correctly
  • Accessibility Barriers: Screen readers struggled with frame navigation
  • Mobile Incompatibility: Frames didn't work well on mobile devices
  • URL Sharing: The URL didn't reflect the actual content being viewed
  • Maintenance Complexity: Managing multiple HTML files was cumbersome
  • JavaScript Issues: Cross-frame scripting had security and complexity problems

Security and Accessibility Issues

Security Concerns

  • Cross-frame scripting vulnerabilities
  • Clickjacking attacks were easier to execute
  • Difficult to implement Content Security Policy (CSP)
  • Same-origin policy complications

Accessibility Problems

  • Screen readers couldn't navigate frames effectively
  • Keyboard navigation was confusing and inconsistent
  • No clear focus indication when moving between frames
  • Violated WCAG accessibility guidelines
  • Difficult to provide alternative content for assistive technologies

Old Frameset vs Modern Alternatives

Old Approach (Don't Use)

HTML 4 Frameset

<!-- OLD: HTML 4 Frameset (DEPRECATED) -->
<frameset rows="100px,*">
  <frame src="header.html">
  <frameset cols="200px,*">
    <frame src="menu.html">
    <frame src="content.html" name="mainContent">
  </frameset>
</frameset>

Modern Approach (Recommended)

CSS Grid Layout

<!-- MODERN: Single HTML page with CSS Grid -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: grid;
      grid-template-areas:
        "header header"
        "menu content";
      grid-template-rows: 100px 1fr;
      grid-template-columns: 200px 1fr;
      height: 100vh;
      margin: 0;
    }

    header { grid-area: header; }
    nav { grid-area: menu; }
    main { grid-area: content; }
  </style>
</head>
<body>
  <header>Header Content</header>
  <nav>Menu Content</nav>
  <main>Main Content</main>
</body>
</html>

Migration Checklist

✅ Steps to Migrate from Frames:
  1. Analyze Current Structure: Document what each frame contains
  2. Choose Modern Layout:
    • CSS Flexbox for simple side-by-side layouts
    • CSS Grid for complex multi-section layouts
    • <iframe> only when truly embedding external content
    • SPA framework for dynamic content loading
  3. Consolidate Content: Combine frame contents into single responsive pages
  4. Update Navigation: Use JavaScript or server-side routing for dynamic content
  5. Test Accessibility: Ensure screen readers and keyboard navigation work properly
  6. Update URLs: Implement proper URL structure for bookmarking and sharing
  7. Test Responsiveness: Ensure layout works on all device sizes

Try it Yourself

Modern Layout Example

Modern CSS Grid layout (replaces old frames):

Header
Navigation
  • Home
  • About
  • Contact
Main Content

This uses modern CSS Grid - no frames needed!

This layout is accessible, SEO-friendly, and mobile-responsive!

Related Tags