HTML <frameset> Tag
The <frameset> tag was used to define a container for HTML frames, allowing a webpage to be divided into multiple independent areas, each displaying a separate HTML document. This tag was a core component of frame-based layouts, which are now considered outdated.
Syntax
<frameset cols="pixels|%,*" rows="pixels|%,*">
<frame src="URL" name="name" />
<frame src="URL" name="name" />
...
</frameset>
Attributes
| Attribute | Value | Description | |
|---|---|---|---|
cols |
`pixels | %,*` | Defines the number and size of columns in a frameset. Values can be absolute pixels, percentage of screen width, or a * to take up remaining space. |
rows |
`pixels | %,*` | Defines the number and size of rows in a frameset. Values can be absolute pixels, percentage of screen height, or a * to take up remaining space. |
border |
pixels |
Specifies the width of the border of each frame. (Deprecated) | |
bordercolor |
color |
Specifies the color of the border of each frame. (Deprecated) | |
frameborder |
`1 | 0` | Specifies whether or not to display a border around the frames. (Deprecated) |
framespacing |
pixels |
Specifies the amount of space between frames. (Deprecated) | |
onload |
script |
Specifies a script to run when the frameset is loaded. (Deprecated) | |
onunload |
script |
Specifies a script to run when the frameset is unloaded. (Deprecated) |
Note: Many attributes are deprecated in HTML5, but included here for historical context.
Example
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="25%,75%">
<frame src="frame_1.html" name="frame1">
<frame src="frame_2.html" name="frame2">
</frameset>
</html>
More Examples
Example 1: Using Rows
<frameset rows="30%,70%">
<frame src="top_frame.html" name="top">
<frame src="bottom_frame.html" name="bottom">
</frameset>
This example divides the screen vertically into two frames.
Example 2: Using a combination of Rows and Columns
<frameset rows="50%,50%">
<frame src="top.html" name="top">
<frameset cols="30%,70%">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
</frameset>
This example sets up a frameset with two rows, and the second row is further divided into two columns.
Example 3: Using the * wildcard
<frameset cols="200,*,100">
<frame src="nav.html">
<frame src="main.html">
<frame src="aside.html">
</frameset>
This example specifies a navigation bar (200 pixels wide), an aside (100 pixels wide), and the main content taking up the remaining space.
Browser Support
The <frameset> tag is deprecated in HTML5. While it might still render in some browsers, its use is strongly discouraged. Modern browsers support it for backward compatibility, but it can lead to accessibility and usability issues.
| Browser | Support |
|---|---|
| Chrome | Yes (Deprecated) |
| Edge | Yes (Deprecated) |
| Firefox | Yes (Deprecated) |
| Safari | Yes (Deprecated) |
| Opera | Yes (Deprecated) |
| Internet Explorer | Yes (Deprecated) |
Notes and Tips
- Avoid using
<frameset>: Frame-based layouts are outdated and create several issues, including poor SEO, accessibility problems, and usability challenges. - Use Modern Layout Techniques: Modern web development uses CSS-based layout techniques such as flexbox or grid to achieve complex page layouts. These methods offer greater flexibility, are more responsive, and are more accessible.
- Alternative approaches: If you need to display separate content sections, consider using
<iframe>elements. However, be mindful that excessive use of iframes can also impact performance and user experience. - Migration: If you have existing sites using
<frameset>, plan to migrate them to a modern CSS-based layout. This will enhance usability, improve accessibility, and ensure long-term compatibility. - Maintainability: Frame-based sites are very hard to maintain, debug, and modify because of their fragmented nature. Modern layout techniques solve all these issues.
