`<frame>` - Frames (deprecated)

<frame> was an early HTML tag used to create frame-based layouts, allowing multiple independent HTML documents to be loaded in the same browser window. Due to usability and accessibility issues, it has been deprecated in HTML5, but understanding its historical usage remains meaningful.

Basic Syntax of <frame>

<frame> must be nested within a <frameset> tag and specifies the document to load via the src attribute. A typical frameset structure is as follows:

<frameset cols="25%,75%">
  <frame src="menu.html" name="menuFrame">
  <frame src="content.html" name="contentFrame">
</frameset>

The cols or rows attributes of <frameset> define the column or row layout of the frames. For example:

• cols="30%,70%" represents left and right columns with a 3:7 width ratio.
• rows="100px,*" represents top and bottom rows, with the first row fixed at 100px in height.

Detailed Frame Attributes

<frame> supports multiple attributes to control its behavior:

<frame
  src="page.html"
  name="main"
  noresize
  scrolling="auto"
  marginwidth="10"
  marginheight="10"
  frameborder="0"
>

• name: Names the frame for reference by the target attribute of hyperlinks.
• noresize: Prevents users from resizing the frame by dragging its borders.
• scrolling: Controls scrollbar display (auto/yes/no).
• marginwidth/marginheight: Sets the spacing between content and borders.
• frameborder: Determines whether to display borders (0/1).

Communication Between Frames

Different frames can interact via window.parent and window.frames:

<!-- Main frameset -->
<frameset cols="50%,50%">
  <frame src="frame1.html" name="left">
  <frame src="frame2.html" name="right">
</frameset>

<!-- frame1.html -->
<script>
function changeRightFrame() {
  parent.frames.right.document.body.style.backgroundColor = "lightblue";
}
</script>
<button onclick="changeRightFrame()">Change Right Frame</button>

Modern Alternatives

Modern web development recommends the following alternatives:

1. CSS Layout:

<div class="container">
  <nav class="sidebar">...</nav>
  <main class="content">...</main>
</div>

<style>
.container { display: flex; }
.sidebar { width: 25%; }
.content { width: 75%; }
</style>

2. iframe (retains frame-like behavior but is more flexible):

<iframe src="widget.html" style="width:100%; height:300px; border:none;"></iframe>

3. Frontend Framework Components (e.g., React/Vue):

// React example
const App = () => (
  <div className="app">
    <Sidebar />
    <MainContent />
  </div>
);

Historical Case Study

Early websites like Yahoo! in the 1990s used frame layouts:

<frameset rows="80,*">
  <frame src="banner.html" scrolling="no" noresize>
  <frameset cols="150,*">
    <frame src="navigation.html">
    <frame src="main.html" name="content">
  </frameset>
</frameset>

Typical issues with this layout included:

• Inability to bookmark subpage URLs directly.
• Difficulty for search engines to index content.
• Printing would only print a single frame.

Related Deprecated Technologies

Technologies deprecated alongside <frame> include:

• <noframes>: Provided fallback content for browsers that did not support frames.
• <frameset>: The container for frames.
• Frame-specific JavaScript properties like window.top.

Modern Browser Support

While mainstream browsers still support <frame>, they display deprecation warnings. In Chrome Developer Tools, you might see:

The <frame> tag is obsolete. Use CSS or <iframe> instead.

Backward Compatibility Handling

For maintaining legacy systems, conditional comments can be used:

<!--[if !IE]>-->
<div class="modern-layout">...</div>
<!--<![endif]-->

<!--[if IE]>
<frameset cols="25%,75%">...</frameset>
<![endif]-->