`<frameset>` - frameset (deprecated)

The <frameset> tag was an early HTML element used to create multi-frame pages by dividing the browser window to display multiple independent documents simultaneously. With the evolution of modern web standards, this tag has been deprecated, but understanding its design logic remains valuable for learning about legacy systems.

Basic Syntax of <frameset>

<frameset> defines window divisions using the rows and cols attributes, and its child elements can only be <frame> or nested <frameset>. Below is a classic three-column layout example:

<frameset cols="25%,50%,25%">
  <frame src="left.html" name="leftFrame">
  <frame src="middle.html" name="mainFrame">
  <frame src="right.html" name="rightFrame">
</frameset>

Core Attributes Explained

Window Division Control

• rows: Vertical division, with values as comma-separated height values (pixels/percentage/relative units)

  <frameset rows="100px,*,20%">  <!-- Fixed height + remaining space + percentage -->
    <frame src="header.html">
    <frame src="content.html">
    <frame src="footer.html">
  </frameset>
  

• cols: Horizontal division, with syntax identical to rows

  <frameset cols="150px,*">  <!-- Sidebar + main content area -->
    <frame src="nav.html">
    <frame src="main.html">
  </frameset>
  

Frame Behavior Control

• frameborder: Controls border display (0/1 or yes/no)
• border: Border thickness (pixel value)
• framespacing: Frame spacing (deprecated)

Nested Frameset Example

Complex layouts require nested <frameset> usage. Below is an example of mixed division:

<frameset rows="80px,*">
  <frame src="banner.html" noresize>
  <frameset cols="200px,*">
    <frame src="menu.html">
    <frame src="dashboard.html" name="content">
  </frameset>
</frameset>

Using the <frame> Tag

Each frame must define its content source via <frame>:

<frame
  src="data.html"
  name="dataFrame"
  scrolling="auto"
  noresize
  marginwidth="10"
  marginheight="5">

• name: Used for hyperlink target positioning
• noresize: Prevents users from resizing the frame
• scrolling: Scrollbar control (yes/no/auto)

Comparison with <iframe>

Although <iframe> is still supported, the two differ fundamentally:

Modern Alternatives

Post-deprecation standard alternatives include:

1. CSS Flexbox multi-column layouts

   <div class="container">
     <div class="left">...</div>
     <div class="main">...</div>
   </div>
   <style>
   .container { display: flex; }
   .left { width: 200px; }
   .main { flex: 1; }
   </style>
   

2. CSS Grid for complex grids

   body {
     display: grid;
     grid-template-columns: 1fr 3fr;
     grid-template-rows: 60px 1fr 40px;
   }
   

Legacy Compatibility Notes

Special scenarios when maintaining old systems:

• Cross-frame communication relies on parent.frames[] array
• Form submissions require specifying target frame names
• Browser back button may affect the entire frameset

// Traditional cross-frame script calls
window.parent.frames["nav"].document.getElementById("btn")

Reasons for Deprecation and Flaws

Key reasons W3C deprecated this tag:

1. Accessibility issues: Screen readers struggle to parse frame content
2. Mobile adaptation: Fails to respond to varying viewport sizes
3. State management difficulties: URLs cannot reflect individual frame states
4. Performance issues: Synchronous loading of multiple documents increases latency