Path // www.yourhtmlsource.com → Reference → <noframes>

<noframes>

The <noframes> element was used to provide fallback content for browsers that didn't support HTML frames, or for users who had frames disabled. Since frames themselves have been removed from HTML5, this fallback element is equally obsolete.

This page was last updated on 2025-11-17

Deprecation Warning

This element is obsolete and should not be used. The <noframes> element was removed from HTML5 along with the entire frames specification (<frameset> and <frame>). Frames are no longer part of modern web standards.

The entire concept of frames was problematic: it broke the fundamental web model of addressable pages, caused issues with bookmarking and sharing URLs, created accessibility problems, and complicated search engine indexing. Modern web development has far superior alternatives.

Syntax

<frameset cols="25%,75%">
  <frame src="nav.html">
  <frame src="content.html">
  <noframes>
    <p>Your browser does not support frames.</p>
    <p><a href="noframes.html">View non-frames version</a></p>
  </noframes>
</frameset>

The element contained HTML content that would only be displayed in browsers that couldn't render frames. This entire structure is now obsolete.

Historical Context

Frames were used in the 1990s and early 2000s for:

Persistent navigation sidebars
Headers that stayed visible while content scrolled
Splitting the browser window into multiple sections
Loading different pages into different sections

They were abandoned because:

They broke the "one URL per page" web model
Bookmarking showed the frameset URL, not the actual content
Back button behavior was confusing
Search engines had difficulty indexing frame content
Accessibility tools struggled with frame navigation
Printing was problematic
CSS provides better layout solutions

Modern Alternatives

All frame-based layouts can be achieved with modern CSS:

For Persistent Navigation: CSS Flexbox/Grid

<div class="layout">
  <nav class="sidebar">Navigation</nav>
  <main class="content">Main Content</main>
</div>


.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  position: sticky;
  top: 0;
}

For Fixed Headers: CSS Position

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

main {
  margin-top: 60px; /* Header height */
}

For Loading External Content: iframes or AJAX

<iframe src="external-content.html" title="Description"></iframe>


<div id="content-area"></div>
<script>
  fetch('content.html')
    .then(response => response.text())
    .then(html => document.getElementById('content-area').innerHTML = html);
</script>