Understanding HTML Frameset Tag
By Mohit Joshi, Community Contributor - September 30, 2024
The concept of HTML frameset was introduced in the earlier versions of HTML (4 and before). The frameset tag contains different frame elements that divide the screen into multiple smaller sections that can display individual HTML documents.
The primary purpose of implementing HTML framesets was to display several independent contents at once on a webpage, such as a navigation menu, header, footer, and more.
The latest version of HTML 5, released in 2014, deprecates the HTML frame and frameset due to significant usability and accessibility issues.
Read More: HTML vs HTML5: Core Differences
Table of ContentsCommon Attributes in HTML Frameset <frameset> How to Load Different Pages in Frames? How to Nest Framesets within one another? Benefits and Challenges in HTML framesets Importance of Testing Websites on Real Devices
- What is a frame in HTML?
- What is a frameset in HTML?
- Difference between Frame and Frameset
- When to Use Framesets?
- Basic Syntax of HTML Frameset
- Structure of a Frameset Document
- The <frameset> Tag
- Defining Rows and Columns
What is a frame in HTML?
A frame is defined as the section of a webpage in a browser that can load an individual HTML document. All these different frames in HTML are scrollable and resizeable, and they contain content that is independent from the rest of the frames.
Moreover, each frame in a webpage functions independently, meaning they can be refreshed, navigated, and scrolled without affecting the overall webpage.
What is a frameset in HTML?
The frameset element in HTML defines the layout, consisting of multiple frames. This divides the browser windows into sections, each displaying a separate HTML document. <frameset> is an alternative to the <body> tag when creating frames-based layouts.
The <frameset> tag controls how the window is split by specifying rows or columns. The ‘rows’ attribute divides the browser window horizontally, while the ‘cols’ attribute divides it vertically, creating flexible, multi-frame layouts.
Though outdated and replaced by modern techniques like <iframe>, <frameset> was once popular for creating independent sections within a single window.
<!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset rows="50%,50%"> <frame name="first" src="link/to/frame1" /> <frame name="second" src="link/to/frame2" /> </frameset> </html>
Here, in the above code, two frames that will take 50% height of the browser window are initialised and each is linked to an individual HTML document.
Difference between Frame and Frameset
To avoid any confusion between Frame and Frameset you must understand some key differences between them.
| Aspect | Frame | Frameset |
|---|---|---|
| Defintion | A frame is an independent part of a web page or browser window. | A frameset is the HTML element that defines how a given number of frames are to be arranged and displayed on a webpage. |
| Purpose | The main function is to display the contents of individual HTML pages in separate, scrollable sections of one browser window. | A frameset is essentially an arrangement of all the frames in a window. |
| HTML Tag | It uses the <frame> tag. | Uses the tag <frameset>. |
| Use case | Used when you want to show one specific content area in one divided part of the screen. | It’s used for splitting the actual web page into various regions. |
| Scrolling and Resizing | A frame can scroll and resize independently. | It lays out the overall structure of the frames but does not control the scrolling or resizing of individual frames directly. |
When to Use Framesets?
In the context of modern web development, using Framesets is not appreciated as the tag is deprecated in the modern version of HTML. Therefore, you must switch to alternatives such as CSS Flexbox, CSS Grid, iFrames, and JavaScript frameworks, including React, Angular JS, and more.
Here are some use cases of Framesets that have been used in the past.
- Frames were used to create different elements of a website including, header, footer, navbar, and more.
- A common header or navigation bar for a multi-page website where the main content is rendered on a different frame whereas, the navigation bar is displayed on a different frame.
Read More: Handling images in HTML and CSS
Basic Syntax of HTML Frameset
Understand the basic syntax of HTML Frameset and how a browser window is divided into multiple frames, each displaying a different HTML document.
Structure of a Frameset Document
The basic syntax of Frameset is as follows:
<!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset rows="50%,50%"> <frame name="first" src="link/to/frame1" /> <frame name="second" src="link/to/frame2" /> </frameset> </html>
You must have noticed that in HTML, when using the <frameset> tag, the <body> tag is not used. Instead, the <frameset> replaces the <body> tag completely.
The <frameset> Tag
The <frameset> tag divides the browser windows into multiple frames, and each frame is initialized using the <frame> tag.
<frameset> <frame src="file1.html"> <frame src="file2.html"> ... </frameset>
However, the above syntax is incomplete because it also had to define at what ratio the browser window is being divided.
Defining Rows and Columns
You can divide the browser window into rows or columns or a combination of both using the ‘row’ and ‘col’ attributes. The syntax for doing so is as follows:
<frameset [rows="value1, value2, ..."] [cols="value1, value2, ..."]> <frame src="file1.html"> <frame src="file2.html"> ... </frameset>
Read More: How to Test HTML Code in a Browser?
Common Attributes in HTML Frameset <frameset>
Apart from the two attributes discussed above that are used to divide browser windows into rows and columns, here are more important attributes in the HTML frameset.
- Border/frameborder – It is used to set the border width between frames.
- Framespacing– It is used to measure the space between frames.
- Frameborder– It is used to hide and display the borders between frames.
- Bordercolor– It is used to add color to the frames’ border.
How to Load Different Pages in Frames?
To load different pages in individual frames, the src attribute is used, which takes the value of the HTML file name and location. The following syntax is used:
<!DOCTYPE html> <html> <head> <title>Frameset with Links</title> </head> <frameset cols="30%, 70%"> <!-- Left frame: Menu --> <frame src="menu.html" name="menuFrame"> <!-- Right frame: Content area--> <frame src="default.html" name="contentFrame"> </frameset> </html>
How to Nest Framesets within one another?
Nesting framesets allow you to first divide the full window into rows and columns and then again divide any specific space into rows and columns. This could be done easily by placing the <frameset> tag inside the <frameset> tag.
<frameset cols="30%,70%"> <frame src="menu.html"> <frameset rows="50%,50%"> <frame src="content1.html"> <frame src="content2.html"> </frameset> </frameset>
Benefits and Challenges in HTML framesets
Framesets were used in older versions of HTML to design a webpage with multiple sections, each rendering an individual HTML document. Back then, framesets were used widely to create navigation bars, headers, footers, and more. They set a starting point for the current advanced web development frameworks.
The current web development scenario doesn’t entertain the use of HTML framesets and has been deprecated long before since the release of HTML 5 in 2014. Moreover, the majority of the latest browser versions don’t support framesets.
There were numerous usability issues with the framesets, including:
- Unable to adapt to responsive designs.
- Poor-looking user interface containing scroll bars for each frame.
- Buttons didn’t operate well as they would function for a single frame rather than the entire page, including the back button.
- There were accessibility issues, including screen readers and assistive technologies.
- Each frame represents a different HTML file, therefore it was very difficult to maintain complex projects.
Importance of Testing Websites on Real Devices
It has become a worldwide norm to thoroughly test your product before launching it to users in real-user conditions, as this effectively captures defects. It also ensures a good user experience, protects your reputation, and addresses other important factors.
Although testing on real devices is a good option, setting up a lab with several devices can be very costly. Therefore, the best alternative without impacting the overall efficiency of the test is to rely upon real device cloud testing.
Testing on a real device cloud provides you access to unlimited devices in one place without having to buy numerous physical devices. This not only provides broader coverage for testing but also significantly reduces costs.
Benefits of Testing Websites on Real Devices:
- Accurate User Experience: Test how your site behaves on actual devices used by your audience for an authentic user experience.
- Device-Specific Bugs: Identify device-specific issues, such as touch gestures or screen size compatibility, that may not show up in emulators.
- Real-World Performance: Learn how your website performs in real-world scenarios, including loading times, responsiveness, and network conditions.
- Cross-Browser Accuracy: Ensure your site works seamlessly across different browsers and devices, reducing the risk of layout or functionality issues.
- Improved Debugging: Get real-time insights and debug issues directly on real hardware, making troubleshooting more precise and efficient.
BrowserStack is a one-stop solution providing real devices on cloud and cross-browser testing capabilities. Testing your application on BrowserStack gives you an edge by performing parallel testing on a multiple devices and operating systems in the cloud, from older versions to the latest ones.
Therefore, a thorough test on a real device cloud ensures your application reaches a wider spectrum of devices and hence more users.
Conclusion
Considering the modern-day web development scenario, using Framesets is only feasible if you want to maintain any old legacy codebase. Since the Frameset tag was deprecated long ago, many alternatives have emerged that have revolutionized the scenario, including CSS Flexbox, CSS grid, and Single-Page application frameworks such as React, Angular, Vue, and many more.
Frameset was deprecated for several reasons, including usability issues such as multiple scroll bars for each frame in a single webpage, a poor-looking user interface, several accessibility issues with screen readers, and much more.
Overall, HTML framesets once provided a method for creating a website with multiple scrollable independent sections. They are now obsolete, and more advanced technologies have replaced them, giving better results.
Irrespective of the HTML tags you use, ensure that your modern websites work seamlessly across real devices using BrowserStack’s comprehensive testing platform.
Was this post useful?
We're sorry to hear that. Please share your feedback so we can do better
Thanks a lot for your feedback!
Featured Articles
HTML vs HTML5: Core Differences
Handling Images in HTML and CSS: Everything you need to know
Test Websites Across Browsers Seamlessly
Use BrowserStack to test your website’s compatibility across real browsers and devices instantly, ensuring a flawless user experience.
