HTML <frameset> Tag
The HTML <frameset> Tag: A Brief Overview
The <frameset> tag is one of the older HTML tags that divided a browser window into multiple frames, each of which could load a different document. Developers can use this in web design to create different sections for separate scrolling or navigation. However, HTML5 deprecated the <frameset> tag, and modern web development has now shifted towards <iframe> and CSS-based layout.
This guide is intended to provide you with an overview of the <frameset> tag functions, its structure, and why developers moved away from it.
1. What is the <frameset> Tag?
The <frameset> tag defines how the browser window is subdivided into multiple frames, where one can load an HTML document inside each frame. The <frameset> tag serves to replace the <body> tag in its use since it specifically houses <frame> tags.
Example of a Frameset:
<html>
<frameset cols="30%,70%">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
In this example:
- The browser window is split into two vertical sections:
- The left frame is 30% of the width and has
menu.htmlloaded. - The right frame is 70% of the width and loads
content.html.
- The left frame is 30% of the width and has
2. The <frameset> Attributes
The <frameset> tag is characterized by attributes that define how the frames are formed and behave.
Common Attributes:
1. cols
The frame divides in columns.
Values can either be percentages (30%,70%), pixel widths (200px, *), or asterisks (*) for the remaining space.
<frameset cols="50%,50%">
2. rows
Defines an arrangement of frames in rows.
Like cols, it can be defined in percentages, pixels, or asterisks to divide the space.
<frameset rows="25%,75%">
3. <framesets> Inside <framesets>
You may nest <frameset> tags within individual <frameset> tags to create a complex configuration that combines rows and columns.
Example of Nested Framesets:
<html>
<frameset rows="30%,70%">
<frame src="header.html">
<frameset cols="50%,50%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</html>
In this example:
- The browser window is first divided into two horizontal sections:
- The top frame is 30% of the height and loads
header.html. - The bottom frame is 70% of the height, further divided into two vertical sections:
- The left frame is 50% of the width and loads
left.html. - The right frame is 50% of the width and loads
right.html.
- The left frame is 50% of the width and loads
- The top frame is 30% of the height and loads
Conclusion
The <frameset> tag was once a valuable tool for creating multi-frame layouts, allowing developers to load different documents in a single browser window. However, its limitations in usability, accessibility, and compatibility with modern standards led to its deprecation in HTML5. Today, <iframe> and CSS-based layouts are preferred for their flexibility and better support in modern web design.
While understanding <frameset> is essential for maintaining legacy systems, modern developers should avoid using it for new projects and adopt contemporary web design techniques.