Table of contents
1.
Introduction
2.
What are Frames in HTML?
3.
Syntax
3.1.
Basic Syntax
4.
How to Create Frames in HTML
4.1.
Example: Creating Horizontal Frames
5.
Creating Vertical Frames
5.1.
Example: Creating Vertical Frames
6.
Frame's Name and Target Attributes
6.1.
Example: Using Frame Names
6.2.
Example: Using the target Attribute
7.
Attributes of <frameset> Tag
7.1.
Example: Using Attributes
8.
Disadvantages of Frames
9.
Frequently Asked Questions
9.1.
Why are frames no longer used in HTML5?
9.2.
Can I still use frames in modern web development?
9.3.
What can I use instead of frames?
10.
Conclusion
Last Updated: Feb 23, 2025
Medium

How to Create Frames in HTML?

Author Rahul Singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Frames in HTML were used to divide a web page into multiple sections, allowing different documents to be displayed simultaneously. This was achieved using the <frame> and <frameset> tags. Frames were commonly used for navigation menus and content display within the same page. However, frames have been deprecated in HTML5 and are no longer recommended for modern web development.

In this article, you will learn about the old method of creating frames in HTML and alternative approaches using modern techniques like CSS and iframes.

What are Frames in HTML?

Frames in HTML are used to split a webpage into multiple sections, each containing a separate HTML document. This helps in displaying different content side by side. However, frames are considered outdated in modern web development and are not supported in HTML5. They were primarily used in earlier versions of HTML to create layouts before the widespread adoption of CSS and JavaScript.

Syntax

Frames in HTML are created using the <frameset> tag instead of the <body> tag. The <frame> tag is used to define each frame inside the <frameset>.

Basic Syntax

<!DOCTYPE html>
<html>
<head>
    <title>HTML Frames Example</title>
</head>
<frameset cols="50%,50%">
    <frame src="page1.html">
    <frame src="page2.html">
</frameset>
</html>

 

Explanation

  • <frameset> replaces <body> and defines how the page is divided.
     
  • cols="50%,50%" splits the screen into two equal vertical sections.
     
  • <frame src="page1.html"> loads page1.html in the first section.
     
  • <frame src="page2.html"> loads page2.html in the second section.

How to Create Frames in HTML

Frames can be created using the <frameset> tag to define rows and columns. Here’s how you can create different frame layouts.

Example: Creating Horizontal Frames

<!DOCTYPE html>
<html>
<head>
    <title>Horizontal Frames</title>
</head>
<frameset rows="30%,70%">
    <frame src="header.html">
    <frame src="content.html">
</frameset>
</html>

 

Explanation:

  • rows="30%,70%" divides the page into two horizontal sections.
     
  • header.html is displayed in the top section (30% height).
     
  • content.html is displayed in the bottom section (70% height).

Creating Vertical Frames

Vertical frames are created by dividing the webpage into multiple columns.

Example: Creating Vertical Frames

<!DOCTYPE html>
<html>
<head>
    <title>Vertical Frames</title>
</head>
<frameset cols="30%,70%">
    <frame src="menu.html">
    <frame src="main.html">
</frameset>
</html>

 

Explanation:

  • cols="30%,70%" splits the page into two vertical sections.
     
  • menu.html appears in the left section (30% width).
     
  • main.html appears in the right section (70% width).

Frame's Name and Target Attributes

Each frame can be given a name, which helps in linking from one frame to another using the target attribute.

Example: Using Frame Names

<!DOCTYPE html>
<html>
<head>
    <title>Frame Name Example</title>
</head>
<frameset cols="30%,70%">
    <frame src="menu.html" name="menuFrame">
    <frame src="main.html" name="mainFrame">
</frameset>
</html>

 

Explanation:

  • name="menuFrame" assigns a name to the frame.
     
  • This allows links to open in a specific frame.

Example: Using the target Attribute

<!DOCTYPE html>
<html>
<body>
    <a href="content.html" target="mainFrame">Open in Main Frame</a>
</body>
</html>

 

Explanation:

  • target="mainFrame" ensures the linked page opens in the specified frame.

Attributes of <frameset> Tag

The <frameset> tag has multiple attributes for defining the frame layout.

AttributeDescription
colsDefines the width of each column in the frameset.
rowsDefines the height of each row in the frameset.
borderSpecifies the thickness of the frame border.
frameborderDefines whether frames have visible borders (0 or 1).
noresizePrevents users from resizing frames.

Example: Using Attributes

<!DOCTYPE html>
<html>
<head>
    <title>Frameset with Attributes</title>
</head>
<frameset cols="40%,60%" border="2">
    <frame src="left.html" noresize>
    <frame src="right.html">
</frameset>
</html>

 

Explanation:

  • border="2" sets the frame border width.
     
  • noresize prevents the first frame from being resized.

Disadvantages of Frames

1. Poor SEO Performance: Search engines struggle to index websites that use frames. Since each frame loads a separate HTML file, search engine crawlers may not recognize the relationship between the frames. This can lead to lower visibility in search results, making it harder for users to find your website.  

 

2. Navigation Issues: Frames can confuse users because the browser’s back & forward buttons don’t work as expected. For instance, clicking the back button might take the user to a completely different page instead of navigating within the current frame. This creates a poor user experience.  

 

3. Bookmarking Problems: When a user bookmarks a page with frames, the bookmark often saves the main frameset file rather than the specific content they were viewing. This means when they revisit the bookmark, they might not land on the exact page they intended to save.  

 

4. Accessibility Concerns: Frames can make websites less accessible to users with disabilities. Screen readers & other assistive technologies may struggle to interpret the relationship between frames, leading to confusion for users who rely on these tools.  

 

5. Maintenance Challenges: Managing multiple HTML files for a single webpage can become tedious. Each frame requires its own file, which increases the complexity of updates & maintenance. For example, if you want to change the design of your website, you’ll need to update every individual file used in the frames.  

Frequently Asked Questions

Why are frames no longer used in HTML5?

Frames are not used in HTML5 because they cause accessibility issues, make bookmarking difficult, and do not work well with modern responsive designs. Instead, CSS and JavaScript are preferred for layout design.

Can I still use frames in modern web development?

While frames can still be used in older versions of HTML, they are not recommended. Modern techniques like <div> with CSS flexbox or grid layouts are preferred for structuring webpages.

What can I use instead of frames?

You can use <iframe> elements for embedding external content, or CSS-based layouts like flexbox and grid for better control over page structure.

Conclusion

In this article, we discussed how to create frames in HTML using the <iframe> tag. The <iframe> element allows embedding external web pages, videos, or documents within a webpage. It is commonly used for displaying maps, advertisements, and third-party content. Understanding iframes helps developers integrate external resources while maintaining a structured and interactive web layout.

Live masterclass