HTML Frames
A web page can be divided into multiple sections using frames in HTML, with each section showing a separate HTML document. This feature was widely used in older websites to create layouts with a fixed menu, header, or navigation panel. Although frames are mostly obsolete today, understanding them is still useful for learning legacy code or maintaining old projects.
Key Points- Each frame works as an independent window.
- The
<frameset>tag is used instead of body. - The
<frame>tag specifies which page will load in each section.
What Are Frames in HTML?
A frame is a section of a browser window that can load a separate webpage. Instead of showing the entire website as a single page, frames divide the browser screen into multiple independent areas, each capable of loading its own content and having its own scroll bar.
Example Use Case
- Top frame: Displays the header or logo of the site.
- Left frame: Shows the navigation menu.
- Main frame: Displays the main content that changes when you click links.
The <frameset> Tag
The frameset tag replaces the body tag in frame-based layouts. It defines how the window will be split — either horizontally (rows) or vertically (columns).
Attributes of frameset- rows – Defines horizontal sections.
- cols – Defines vertical sections.
- border – Sets the border width between frames.
- frameborder – Enables or disables borders.
- scrolling – Controls scrollbars in frames.
The <frame> Tag
Each section created by frameset uses a frame tag to load a specific page.
Common Attributes- src – The URL of the page to be displayed in the frame.
- name – Assigns a name to the frame, useful for navigation links.
- scrolling – Allows, disables, or auto-enables scrolling.
- noresize – Prevents the frame from being resized.
Creating Horizontal Frames
A horizontal frameset divides the browser window into horizontal sections (rows), where each section can load a different webpage.
Explanation:
- The rows attribute divides the window into two horizontal sections:
- The first section takes 30% of the height and loads header.html.
- The second section takes the remaining 70% and loads content.html.
- Note that HTML5 no longer supports the frame and frameset tags. For modern web design, use iframe or CSS layouts instead.
Creating Vertical Frameset
A vertical frameset divides the browser window into vertical sections (columns), where each column can load a different webpage.
Explanation:
- The cols attribute splits the window vertically into two sections:
- The left section occupies 30% of the width and loads menu.html.
- The right section occupies 70% of the width and loads content.html.
- Note: In HTML5, the frame and frameset tags are no longer supported. Modern web layouts should use iframe or CSS with flexbox or grid for a similar effect.
Linking Between Frames
Frames can also communicate with each other using the target attribute in links. This means that when a user clicks a link in one frame, the page can open in another specified frame instead of the same one. The target value should match the name attribute of the frame where you want the linked page to appear. For example, if you have a navigation menu in the left frame and want the content to open in the main frame, you can set the target to the name of that main frame. This makes browsing within a framed website smoother and more interactive.
Drawbacks of Using Frames
- Although frames were once popular, they have several disadvantages:
- Poor SEO (search engines find it hard to index frame-based sites).
- Difficult navigation and bookmarking.
- Compatibility issues with modern browsers and responsive designs.
- Accessibility problems for screen readers.
Alternative to Frames
Modern web design uses CSS layouts, iframes, and JavaScript frameworks instead of frames. These methods provide more control, responsiveness, and better compatibility with all devices and browsers.
Attributes of frameset Tag
In HTML, the <frameset> tag divides the browser window into multiple frames. A separate HTML document can be loaded into each frame. The <frameset> tag's most important features are as follows:
cols Attribute
The cols attribute defines the number and width of columns (vertical frames) in the browser window.
- Values can be specified in:
- Pixels (e.g., 200)
- Percentage (e.g., 50%)
- Relative size (e.g., *)
<frame src="menu.html">
<frame src="content.html">
</frameset>
rows Attribute
The rows attribute defines the number and height of rows (horizontal frames) in the browser window. Values are similar to cols: pixels, percentage, or relative size.
<frame src="header.html">
<frame src="main.html">
</frameset>
border Attribute
The border attribute specifies whether frames should have a visible border and its width (in pixels).
<frame src="left.html">
<frame src="right.html">
</frameset>
frameborder Attribute
Frame border visibility is determined by the frameborder attribute.
- 1 = Border visible (default)
- 0 = Border not visible
<frame src="left.html">
<frame src="right.html">
</frameset>
framespacing Attribute
The framespacing attribute defines the amount of space between frames in a frameset. It accepts any integer value. For example, using framespacing="10" will create a 10-pixel gap between each frame. (Please note that HTML5 does not support this out-of-date attribute.)
<frame src="left.html">
<frame src="right.html">
</frameset>
noresize Attribute (for <frame> tag)
When added inside a <frame> tag, it prevents the user from resizing that frame.
<frame src="menu.html" noresize>
<frame src="content.html">
</frameset>
name Attribute (for <frame> tag)
The name attribute assigns a name to a frame, allowing links to target that frame.
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
</frameset>
HTML <frame> Tag Attributes
The <frame> tag is placed inside a <frameset> to define individual frames within a web page layout. Each attribute of the <frame> tag helps control how that specific frame looks and behaves, such as setting its source page, size, scrolling options, borders, or whether it can be resized. (Note: In HTML5, the <frame> tag is no longer supported, so you should use iframe or CSS instead.)
src Attribute
Purpose: Specifies the URL of the page or document to display inside the frame.
<frame src="menu.html">
<frame src="content.html">
</frameset>
name Attribute
Purpose: Assigns a name to the frame so that other links or scripts can target this frame.
<frame src="menu.html" name="menuFrame">
<frame src="welcome.html" name="contentFrame">
</frameset>
<a href="about.html" target="contentFrame"> About Us </a>
scrolling Attribute
Purpose: Controls whether scrollbars appear in the frame.
-
Values
- "yes" – Always shows scrollbars.
- "no" – Hides scrollbars, even if content is larger.
- "auto" – Shows scrollbars only when needed.
marginwidth and marginheight Attributes
Purpose: Defines the margin space (in pixels) between the frame’s content and its edges.
vlongdesc Attribute
Purpose: Provides a link to a page with a long description of the frame content, often for accessibility.
align Attribute (Obsolete)
Purpose: Aligns the frame relative to the page (not commonly used).
Advantages of Frames
- Code Reusability – Common sections like headers, footers, or menus can be reused across multiple pages.
- Faster Loading – Only the frame content changes, not the entire page, saving bandwidth and load time.
- Easy Navigation – Menus remain fixed while content changes in another frame, improving navigation.
- Simplifies Updates – Updating one frame file (e.g., a menu) reflects changes across the whole site.
- Organized Layout – Helps separate different sections of a webpage visually and structurally.
Disadvantages of Frames
- Poor user experience – URLs don’t update; hard to bookmark or share.
- Bad for SEO – Search engines can’t index content properly.
- Navigation issues – Back/forward buttons often don’t work as expected.
- Not mobile-friendly – Poor support on modern devices and browsers.
- Hard to maintain – Multiple files make updates complex.
- Bookmarking/printing problems – Can’t easily save or print specific sections.