HTML <frameset> Tag

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 5 Examples
Layout (Legacy)
HTML frameset tag tutorial — legacy multi-pane layouts and CSS grid alternatives
Overview

What You’ll Learn

By the end of this tutorial, you’ll understand how frameset structured legacy multi-pane pages and what to use instead in HTML5.

The HTML <frameset> tag defined split-window layouts that held multiple <frame> panes. This guide covers historical syntax, nesting, attributes, and why CSS grid and iframe replaced frames entirely.

01

Historical Syntax

How <frameset> divided the browser window.

02

cols & rows

Define column and row sizes for panes.

03

Nesting

Combine rows and columns with nested framesets.

04

noframes Fallback

Content for browsers without frame support.

05

CSS Grid Replacement

Modern split layouts without frames.

06

Obsolete Status

Why HTML5 removed frameset entirely.

Fundamentals

What Was the <frameset> Tag?

The frameset element (<frameset>) was the layout container for legacy frame-based pages. It replaced the body in some HTML4 documents and defined how the browser window was split into columns or rows, each filled by a <frame>.

⚠️
Obsolete in HTML5 — Use CSS Grid + iframe

Do not use <frameset> or <frame> in new projects. Modern browsers do not render framesets in HTML5 documents. Use CSS grid or flexbox and iframe instead.

Framesets caused bookmarking, accessibility, and SEO problems. HTML5 removed them entirely. Learn frameset to read legacy code, but build layouts with contemporary tools.

Foundation

📝 Syntax (Historical)

The <frameset> tag wrapped <frame> elements and replaced body in frame-based HTML4 pages:

syntax.html
<frameset cols="25%,50%,25%">

  <frame src="frame1.html">

  <frame src="frame2.html">

  <frame src="frame3.html">

</frameset>

In this example, the window is divided into three columns. Each frame loads a separate HTML document.

Syntax Rules

  • frameset must contain frame or nested frameset elements.
  • Use cols or rows (not both on the same frameset) to define pane sizes.
  • The number of size values must match the number of child frames or nested framesets.
  • Include noframes fallback content inside frameset for accessibility.
Cheat Sheet

⚡ Quick Reference

PatternCode SnippetNotes
Three columns<frameset cols="25%,50%,25%">Obsolete layout
Two rows<frameset rows="50%,50%">Horizontal split
Nested split<frameset><frameset cols="...">Rows + columns combined
Frame borderframeborder="1"Show/hide pane borders
Modern replacementdisplay: grid + iframeValid HTML5 approach
HTML5 statusObsoleteRemoved from specification
Comparison

⚖️ <frameset> vs CSS Grid

Both create multi-pane layouts, but only CSS grid fits modern HTML:

Feature<frameset>CSS Grid
HTML5 statusObsoleteStandard, widely used
Document modelMultiple top-level HTML documentsSingle page with styled regions
BookmarkingPoor (one URL, many panes)Works normally
AccessibilityPoor (removed for good reason)Semantic landmarks, one focus tree
Responsive designDifficultMedia queries, fr units
Comparison

⚖️ <frameset>, <frame>, and <noframes>

These legacy elements worked together as a split-window system:

ElementRoleWhen used (historical)
<frameset>Layout containerDefine columns or rows for the window
<frame>Individual paneLoad one HTML document per pane
<noframes>Fallback contentAlternative page for non-frame browsers
TodayUse CSS grid + semantic HTML + iframe instead
Reference

🧰 Attributes

The <frameset> tag had these historical attributes. All are obsolete in HTML5:

cols Layout

Comma-separated column widths (percentages or pixels) for vertical splits.

cols="25%,50%,25%"
rows Layout

Comma-separated row heights for horizontal splits.

rows="50%,50%"
frameborder Deprecated

Control whether borders appear between frames: 0 or 1.

frameborder="1"
framespacing Deprecated

Pixel spacing between frame panes.

framespacing="10"
border Deprecated

Border width in pixels between frames.

border="2"
attributes.html
<frameset cols="50%,50%" frameborder="1" framespacing="10">

  <!-- frame elements go here -->

</frameset>

The entire frameset element is obsolete. Use CSS grid with grid-template-columns or grid-template-rows in new projects.

Hands-On

Examples Gallery

Historical frameset patterns plus the modern CSS grid replacement. Legacy examples are for learning only—do not use in new code.

Live Preview

Visual mockup of how a three-column frameset layout looked (modern browsers no longer render framesets):

Creating Multi-Paned Layouts

The primary use of <frameset> was to display multiple documents simultaneously in one window.

⚠️ Obsolete tags — for learning only.
creating-multi-paned-layouts.html
<frameset cols="50%, 50%">

  <frame src="navigation.html">

  <frame src="maincontent.html">

</frameset>
Try It Yourself

📚 Common Use Cases (Historical)

Developers once used <frameset> for fixed navigation sidebars, split documentation views, and dashboard-style multi-pane UIs. Today use CSS grid with semantic HTML, server-side includes, or a single-page application architecture instead.

Nesting Framesets

Framesets could be nested to combine rows and columns for more complex layouts.

nesting-framesets.html
<frameset rows="50%,50%">

  <frame src="topsection.html">

  <frameset cols="25%,75%">

    <frame src="leftcolumn.html">

    <frame src="maincontent.html">

  </frameset>

</frameset>
Try It Yourself

noframes Fallback

Always include <noframes> inside frameset so users without frame support could still read meaningful content.

noframes-fallback.html
<frameset cols="50%,50%">

  <frame src="nav.html">

  <frame src="content.html">

  <noframes>

    <body>

      <p>Your browser does not support frames. <a href="content.html">View main content</a></p>

    </body>

  </noframes>

</frameset>

Modern CSS Grid Replacement

Use CSS grid with optional iframe elements to achieve split layouts in valid HTML5.

css-grid-replacement.html
<div class="split-layout">

  <iframe src="sidebar-left.html" title="Left sidebar"></iframe>

  <iframe src="content.html" title="Main content"></iframe>

  <iframe src="sidebar-right.html" title="Right sidebar"></iframe>

</div>
Try It Yourself
Design

Modern Layout Replacement (CSS Grid)

Replace frameset column splits with CSS grid and optional iframe panes:

grid-template-columns Define column sizes
grid-template-rows Define row sizes
grid-template-areas Named regions (nested layouts)
iframe Embed external panes when needed
split-layout.css
/* Modern split layout (replaces frameset) */

.split-layout {

  display: grid;

  grid-template-columns: 25% 50% 25%;

  gap: 0.5rem;

  min-height: 400px;

}



.split-layout iframe {

  width: 100%;

  height: 100%;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

}

Live CSS grid split

A11y

♿ Accessibility

Framesets were removed partly due to accessibility failures:

  • Do not use frameset — screen readers struggled with multi-document navigation and focus management.
  • Use semantic landmarks — nav, main, and aside in one document are easier to navigate.
  • Include noframes historically — even then, fallback content was often ignored by frame-capable browsers.
  • Use iframe with title — if you embed external panes, always add a descriptive title.

🧠 How <frameset> Worked

1

Author defined cols or rows

frameset split the window into proportional panes.

Markup
2

Each frame loaded a document

Child frame elements pointed to separate HTML pages.

Rendering
3

Nested framesets added complexity

Rows and columns could be combined for dashboard-style layouts.

Nesting
=

Today: use CSS grid + semantic HTML

Learn frameset for history. Build with grid and iframe in all new projects.

Compatibility

Browser Support

<frameset> and <frame> are obsolete and not supported in HTML5 documents. Modern browsers will not render frameset layouts.

⚠ Obsolete · Use CSS Grid

Not supported in HTML5

Frameset and frame were removed from the HTML5 specification. Legacy Internet Explorer supported them, but current Chrome, Firefox, Safari, and Edge do not render framesets in modern documents.

95% Legacy reference
Google Chrome Not in HTML5 · Obsolete
Not supported
Mozilla Firefox Not in HTML5 · Obsolete
Not supported
Apple Safari Not in HTML5 · Obsolete
Not supported
Microsoft Edge Not in HTML5 · Obsolete
Not supported
Internet Explorer Legacy support · EOL
Legacy only
Opera Not in HTML5 · Obsolete
Not supported

Modern replacements

Use these HTML5 approaches instead of frameset and frame.

🔗
CSS Grid Split columns and rows with grid-template-*
Replacement
🛠
iframe + semantic HTML Embed external panes with accessible titles
Modern
<frameset> tag 95% legacy reference

Bottom line: Do not use <frameset> in new projects. Use CSS grid and semantic HTML for modern split layouts.

Wrap Up

Conclusion

While the <frameset> tag played a significant role in early web development, its usage is not recommended today. Frameset and frame are obsolete, break accessibility and SEO, and are unsupported in HTML5 documents.

Adopt CSS grid or flexbox for split layouts and iframe when you need embedded external content. Plan migrations if you maintain very old frame-based codebases.

View Examples Gallery Try CSS grid replacement
Pro Tips

💡 Best Practices

✅ Do

  • Use CSS grid or flexbox for split layouts
  • Use semantic HTML (nav, main, aside)
  • Add title on every iframe
  • Learn frameset only for legacy code maintenance

❌ Don’t

  • Use frameset or frame in new projects
  • Split your entire site into multiple frame documents
  • Rely on noframes as your only accessibility strategy
  • Assume framesets work in modern HTML5 pages
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <frameset>

Bookmark these before you ship — they’ll keep you on modern HTML standards.

6
Core concepts
⚠️ 01

Obsolete Tag

<frameset> is removed from HTML5.

Legacy
📊 02

cols & rows

Defined pane sizes for the window.

Layout
🛠 03

Nestable

Combined rows and columns.

Structure
🔗 04

Use CSS Grid

Modern split layout replacement.

Replacement
♿ 05

A11y Failures

Frames broke navigation and SEO.

Accessibility
🌐 06

Not in HTML5

Modern browsers skip framesets.

Compatibility
🎯 You know why CSS grid replaced frameset
Review Quick Reference →

❓ Frequently Asked Questions

It defined the structure of a split browser window using cols or rows, containing frame elements that each loaded a separate HTML document.
No. frameset and frame are obsolete and removed from the HTML5 specification.
Use CSS grid or flexbox for split layouts and iframe to embed external pages inline.
frameset split the entire window into multiple documents (obsolete). iframe embeds one document inside a page and is valid HTML5.
Yes, historically you could nest frameset elements to combine row and column splits. Use CSS grid areas for the same effect today.
No. Beginners should learn CSS grid, flexbox, and iframe. Study frameset only to read legacy HTML.

Build Modern Layouts

Replace obsolete framesets with CSS grid in the interactive HTML editor.

Try CSS grid replacement →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML frame Tag HTML head Tag