Do you think IIT Guwahati certified course can help you in your career?
Introduction
The HTML <frame> tag was a feature that allowed developers to split a single web page into multiple sections, with each section displaying a different document. This technique was commonly used to create layouts with navigation menus on one side and content displayed alongside them. However, it is worth noting that the <frame> tag has been deprecated in HTML5 and is no longer recommended for modern web development.
In this article, you will learn about the syntax of the <frame> tag, its attributes, and how to use it effectively.
Syntax
The <frame> tag is used within the <frameset> tag, which replaces the <body> tag when creating a frameset. Here's the basic syntax:
<frameset rows="row_specification" cols="col_specification">
<frame src="URL1">
<frame src="URL2">
<!-- Additional frames can be added here -->
</frameset>
rows: Specifies the number and size of rows in the frameset.
cols: Specifies the number and size of columns in the frameset.
src: Defines the source URL for the frame content.
Here, the window is split vertically into two sections, with 30% allocated for a navigation menu and 70% for the main content.
Attributes
The <frame> tag includes several attributes that make it useful: The src attribute states the URL of the document to be displayed in the frame. Example:
<frame src="page.html">
name: Assigns a name to the frame for targeting links. Example:
<frame name="mainFrame" src="main.html">
scrolling: Determines whether scrollbars appear in the frame.
Values: yes, no, auto
Example:
<frame src="content.html" scrolling="no">
noresize: Prevents users from resizing the frame.
Example:
<frame src="menu.html" noresize>
frameborder: Controls the visibility of the border around the frame.
Example:
<frame src="page.html" frameborder="0">
Defining Rows and Columns
Framesets allow you to define rows and columns for a structured layout. The rows and cols attributes can accept:
Percentages: Allocate a percentage of the screen space.
Clicking on the links will load the respective pages into the contentFrame.
How to Nest Framesets within One Another?
Nesting framesets allows you to create complex page layouts by dividing the page into multiple rows and columns. You can achieve this by placing one or more <frameset> tags inside another <frameset> tag. Let’s take an example that shows nested framesets:
1. The outer <frameset> tag divides the page into two rows. The first row takes up 40% of the page height and contains a frame that loads the "header.html" file.
2. The second row occupies the remaining 60% of the page height and contains another nested <frameset> tag.
3. The nested <frameset> tag divides the second row into two columns. The first column takes up 30% of the width and loads the "navigation.html" file, while the second column occupies the remaining 70% and loads the "content.html" file.
Benefits and Challenges in HTML Framesets
Benefits
Seamless Navigation: Keep navigation menus and swap content.
Reduced Loading Time: Only parts of the page reload instead of the whole page.
Ease of Layout Design: It makes splitting content into sections easier.
Challenges
Limited Accessibility: Not suitable for screen readers or mobile devices.
Complex URL Management: It is not easy to bookmark specific content.
Deprecated: Frames are not supported in HTML5 and modern web development does not encourage them.
Importance of Testing Websites on Real Devices
Testing your frameset layout on real devices ensures:
Cross-browser Compatibility: Frames are loading fine in different browsers.
Responsive Design: Usability is tested on smaller screens.
User Experience: Scrollbars, navigation, and resizing should work smoothly.
Common Attributes in HTML Frameset <frameset>
The <frameset> tag was used to contain one or more <frame> tags, defining the overall layout of the page. It has several common attributes:
1. rows: Specified the height of each row in the frameset, either in pixels or percentages. For example:
<frameset rows="50%,50%">
2. cols: Specified the width of each column in the frameset, similar to the rows attribute. For example:
<frameset cols="25%,75%">
3. border: Set the border width around each frame in pixels. A value of 0 removed the border entirely. For example:
<frameset border="1">
4. frameborder: Controlled the visibility of frame borders. A value of 1 (default) displayed borders, while 0 removed them. For example:
<frameset frameborder="0">
5. framespacing: Defined the amount of space between frames in pixels. For example:
1. The outer <frameset> tag divides the page into two rows. The first row is 100 pixels high and contains a frame that loads the "header.html" file. The second row takes up the remaining height using the asterisk (*).
2. The outer <frameset> tag uses the following attributes:
- frameborder="1": Displays a border around each frame.
- border="1": Sets the border width to 1 pixel.
- framespacing="5": Adds 5 pixels of spacing between the frames.
3. The inner <frameset> tag divides the second row into two columns. The first column is 150 pixels wide and loads the "navigation.html" file. The second column takes up the remaining width.
4. The inner <frameset> tag also uses the frameborder, border, and framespacing attributes.
5. The <frame> tags have additional attributes:
- noresize="noresize": Prevents the user from resizing the frame.
- name="main_content": Assigns a name to the frame loading "content.html", which can be used as a target for hyperlinks.
Supporting Browsers
The <frame> tag is supported by older browsers but not by modern HTML5-compliant browsers. Below is a summary:
Browser
Supported Versions
Internet Explorer
All versions
Firefox
Version 1.0 to 3.6
Chrome
Not supported
Safari
Not supported
Edge
Not supported
Developers are encouraged to use <iframe> or CSS layouts for better compatibility.
Frequently Asked Questions
What is the purpose of the <frame> tag in HTML?
The <frame> tag allows dividing a web page into multiple sections, each capable of displaying different content.
Can the <frame> tag be used in modern HTML?
No, that is a frame tag of HTML5 which is deprecated because earlier it used to break the browser window into lots of frames using HTML, nowadays it's just done in CSS and JavaScript.
What is the difference between <frame> and <iframe> in HTML?
The <frame> tag was used to define several frames within a <frameset>, thus breaking up the content of a webpage into several sections. The <iframe> tag, which embeds another webpage or content within a single frame on the current page, is also still supported in modern HTML.
Conclusion
In this article, we discussed through the HTML frame tag, its syntax and attributes, and even on use cases. We learned you how to develop frameset rows, columns and even nested frameset of loading different pages with one single frame.
518+ registered 
