HTML is considered the backbone of all websites on the internet. One of its older, now-deprecated features is the <frame> tag, which allowed developers to divide a webpage into multiple sections, each displaying a different HTML document. In this blog, you’ll learn what HTML frames are, how to use them, and their advantages and limitations. Whether you’re a beginner or an experienced developer, this guide will help you understand the <frame> tag.
Table of Contents:
What is HTML?
HTML stands for HyperText Markup Language. It is the language that is used to create the structure of content on the web. HTML tells the browser how to structure and display text, images, links, videos, and other web elements.
What are HTML Frames?
Frames in HTML allow a web developer to divide the browser window into multiple sections, each section called a frame. Each frame can load a separate HTML document, so that users can see multiple web pages at once.
Note: The <frame> and <frameset> tags are deprecated in HTML5 and should not be used in modern web development. Modern layouts should use CSS Flexbox, CSS Grid, or <iframe> for embedding.
Why Use Frames?
Although deprecated in HTML5, the <frame> tag was previously useful in various scenarios. Here are some common use cases of the frame tag in HTML:
- Creating fixed navigation menus.
- Loading different content without reloading the entire page.
- Displaying multiple HTML documents side by side.
Master Front-End & Back-End Development
Enroll Now
Understanding Elements of the Frame Tag
For using the frame tag, it is important to understand each element of the frame tag. Let us understand each element of the frame tag in HTML with an example:
Example: Simple Example of HTML Frame Tag
//index.html
//menu.html
//content.html
Output:
The whole page is divided into two sections or into two frames. The menu.html appears on the left side with a 30% width, and the content.html appears on the right side with the remaining 70% width. Now, let’s understand the different elements of the <frame> tag:
<frameset> Tag
The HTML <frameset> tag is used in place of the <body> tag for creating frames. It defines how the window should be divided into rows or columns. This frameset tag is also deprecated and not used in HTML5.
<frame> Tag
The HTML <frame> tag is used to define each frame inside the <frameset>. It has the “src” attribute, which is used to describe which HTML file to display.
Syntax:
<frame src="menu.html">
<iframe> Tag
Unlike the <frame> tag, which is only used inside the <frameset>, the <iframe> tag is used within a regular HTML document. It is the modern method that is used in place of the <frame> tag. Here is the syntax to use the <iframe> tag in HTML:
<iframe src="https://intellipaat/example.com" width="600" height="400"></iframe>
The <frameset> Tag Attributes
The <frameset> in HTML is the wrapper tag that contains multiple <frame> tags. It is used to control how the browser window is divided into rows and columns. It offers various attributes (special keywords through which you can add additional properties). Here is the list of all the important attributes of the <frameset> tag in HTML.
1. cols
It is used to specify the number of vertical columns in which the whole screen is divided. It uses values like pixels (200px), percentage (40%), and relative units starting with *.
Syntax:
<frameset cols="200px,400px">
<frame src="left.html">
<frame src="right.html">
</frameset>
2. rows
It is another important attribute that is used to divide the screen horizontally into rows. It uses the same values as pixels, percentages, and relative units.
Syntax:
<frameset rows="30%,70%">
<frame src="header.html">
<frame src="body.html">
</frameset>
3. border
It is used to set the width of the border between frames. The default value of the border attribute is 2. You can use border=”0″ if you don’t want to show the borders.
Syntax:
<frameset cols="50%,50%" border="5">
<frame src="left.html">
<frame src="right.html">
</frameset>
4. frameborder
It is used to determine whether a border appears around each frame or not. If frameborder=”1″, then the border is shown, and frameborder=”0″ means the border is not shown.
Syntax:
<frameset cols="50%,50%" frameborder="0">
<frame src="section1.html">
<frame src="section2.html">
</frameset>
5. framespacing
The framespacing attribute is used to add space between the frames that are declared inside the <frameset> tag in HTML. This space is measured in pixels.
Syntax:
<frameset cols="33%, 34%, 33%" framespacing="10">
<frame src="left.html">
<frame src="middle.html">
<frame src="right.html">
</frameset>
Note: This attribute was mainly supported in older versions of Internet Explorer and does not work in modern browsers.
Advantages of Using Frames in HTML
Frames in HTML allowed the developers to split the browser window into independent sections. Here are some advantages of frames for layout, navigation, and content:
- Flexible Page Layouts: Frames provide layout flexibility, which means frames in HTML allow developers to break the page into multiple sections, in the form of rows and columns.
- Fixed Navigation Menus and Sidebars: By using frames, you can set up a navigation menu and sidebar that is fixed while users see the main content.
- Easy Content Updates: If you have more than one page that shares the same header or menu frame. Then you only need to update one file, and the changes will automatically be moved to all pages that use a similar frame.
- Independent Frame Loading: Each frame loads its content separately, which means, if you’re making a change in one part of the page, then it doesn’t require reloading the entire page.
- Embedding Content: By using <iframe>, you can embed video, maps, or other HTML documents directly on your site.
Limitations of Using Frames
HTML frames helped in structuring web pages, but they come with various drawbacks. Here are some important limitations of HTML frames:
- Poor Search Engine Optimization: It is difficult for the frame-based sites to index because each frame loads separately, so it becomes difficult for the search bots to find them.
- Browser Support: The <frameset> and <frame> in HTML are obsolete in HTML5. Some of the modern browsers may still support them, but they are considered outdated and not recommended for use.
- Navigation Issues: Frames in HTML may cause the problem when you use the browser’s back button. It may not work in the way you expected.
- Difficult to Manage: Each frame loads a separate HTML document, and managing these files separately is difficult and increases server load.
Get 100% Hike!
Master Most in Demand Skills Now!
Best Practices of Using HTML Frames
HTML frames are no longer recommended for building websites, but if you decide to use frames in HTML code, then here are some best practices that you need to follow while working with the HTML frames:
- In a page that uses frames, don’t use the <body> tag. Instead of using the <body> tag, it is good to use the <frameset> tag in HTML, which is used to divide the whole page into multiple sections.
- Always ensure that content written in one frame doesn’t overlap with another. Overlapping content degrades the User Experience (UX).
- Different browsers handle frames differently. Thus, it becomes important to test your webpage across different browsers if you’re using HTML frames in your code.
- If you are using multiple frames, then it is required to ensure easy navigation between frames so that users can easily navigate between them.
HTML Frames Vs Modern Alternatives
Frames in HTML are an effective way to divide webpages into sections. But, in modern web development projects, frames are not recommended for use. Alternatives like CSS Flexbox, CSS Grid, and JavaScript frameworks such as React, Angular, or Vue.js provide more flexibility and are widely supported.
Conclusion
Frames in HTML were popularly used for dividing the webpage into multiple sections. It allows the developers to load multiple HTML documents in a browser window. However, as web technologies advanced, the developers shifted to alternative methods like CSS Flexbox, CSS Grid, and frameworks like React, Angular, or Vue.js. These tools help you create mobile-friendly and efficient websites that provide a better experience to users.
Frames in HTML – FAQs
Q1. What is a frame in HTML?
A frame in HTML is used to define a section of a webpage that is used to display HTML documents. In simple words, it is used to divide the browser window into multiple parts.
Q2. Where are frames used?
Frames were mostly used in older websites, because in modern web development projects, alternatives like CSS Flexbox and CSS Grids are used. Frames in HTML were used to create fixed navigation menus, load multiple documents on one page, and avoid reloading the entire page.
Q3. What is the CSS framework?
A CSS framework is defined as a predefined set of tools or templates that will help you create a website faster. Bootstrap and Tailwind CSS are two popular CSS frameworks.
Q4. What are the types of frame tags in HTML?
There are mainly three types of frame-related tags in HTML:
frameset – It is used to divide the window into rows and columns.
frame – It refers to each section of the website.
iframe – It is used to add another website interface to your website.
Q5. What is a floating frame in HTML?
A floating frame in HTML is an inline frame which allows you to embed external or internal HTML content inside a webpage using the <iframe> tag.