HTML <frame> Tag
The <frame> tag is a legacy HTML element used to create a single rectangular region or window within a frameset, enabling the display of a separate HTML document within a specific part of the browser window. It was part of the original HTML frame structure which is now deprecated in favor of more modern solutions like <iframe> and other layout techniques.
Syntax
<frame src="URL" name="frame_name" scrolling="yes|no|auto" noresize="noresize" frameborder="1|0" marginwidth="pixels" marginheight="pixels"></frame>
Attributes
| Attribute | Value | Description | ||
|---|---|---|---|---|
src |
URL | Specifies the URL of the document to be displayed within the frame. | ||
name |
frame_name |
Assigns a name to the frame, which can be used as a target for links or other frames in a frameset. | ||
scrolling |
yes \ |
no \ |
auto |
Specifies whether or not the frame should have scrollbars. auto displays scrollbars as needed, yes forces them always, and no never displays them. |
noresize |
noresize |
Prevents the user from resizing the frame. Note: This attribute was not fully supported. | ||
frameborder |
1 \ |
0 |
Specifies whether or not the frame should have a border. 1 means yes and 0 means no. | |
marginwidth |
pixels |
Specifies the width of the space between the frame's content and its left and right borders. | ||
marginheight |
pixels |
Specifies the height of the space between the frame's content and its top and bottom borders. |
Example
<!DOCTYPE html>
<html>
<head>
<title>Frame Example</title>
</head>
<frameset cols="25%,75%">
<frame src="frame_menu.html" name="menu_frame" />
<frame src="frame_content.html" name="content_frame" />
</frameset>
</html>
In this example, the <frameset> divides the window into two columns, and the <frame> tag is used to specify the HTML document to be loaded into each column, along with a name for each frame. This is how pages used to be split in old websites.
More Examples
1. Basic Frame Setup:
Here's a basic example showing two frames:
<!DOCTYPE html>
<html>
<head>
<title>Simple Frames</title>
</head>
<frameset rows="50%,50%">
<frame src="frame1.html" name="frame1"></frame>
<frame src="frame2.html" name="frame2"></frame>
</frameset>
</html>
The rows attribute in <frameset> divides the window into two equal rows. frame1.html and frame2.html would be two separate html files that display in the frames.
2. Using Scrolling and Noresize
<!DOCTYPE html>
<html>
<head>
<title>Frame Example with Scrolling</title>
</head>
<frameset cols="30%,70%">
<frame src="menu.html" name="menu" scrolling="no" noresize="noresize"></frame>
<frame src="content.html" name="main" scrolling="auto"></frame>
</frameset>
</html>
Here, the menu frame has no scrolling and is non-resizable, whereas the main frame allows auto scroll bars when needed.
3. Using frameborder & marginwidth, marginheight:
<!DOCTYPE html>
<html>
<head>
<title>Frame Example with Borders and Margins</title>
</head>
<frameset cols="20%,80%">
<frame src="nav.html" name="navigation" frameborder="1" marginwidth="10" marginheight="10"></frame>
<frame src="mainpage.html" name="content" frameborder="0"></frame>
</frameset>
</html>
Here a border and margin spacing are applied to the navigation frame, and no border to the content frame.
Browser Support
The <frame> tag is supported by all major browsers, but its usage is strongly discouraged. It is a legacy feature, and its use can cause accessibility and SEO issues. Modern alternatives should be used instead.
- Chrome: Supported but deprecated.
- Edge: Supported but deprecated.
- Firefox: Supported but deprecated.
- Safari: Supported but deprecated.
- Opera: Supported but deprecated.
Notes and Tips
- The
<frame>tag is part of the frameset structure, which is now considered obsolete. - It's not part of the HTML5 specification.
- Modern layouts should use
<iframe>or use CSS for more flexible layouts. - Using frames can create a bad user experience. It can cause difficulty in bookmarking, navigating, and SEO.
- Avoid using this tag for new web development projects.
- Consider using CSS Grid, Flexbox and
<iframe>for modern layout needs. - If you encounter this tag in legacy code, plan to refactor it to use modern HTML/CSS techniques.
