HTML <frame> Tag
Concept
The <frame> tag was primarily used to divide a browser window into multiple sections, each capable of displaying a different HTML document. This was commonly used in a <frameset> element to create layouts with multiple panels, such as a navigation sidebar and a main content area. However,
it’s important to note that this tag is not supported in HTML5 and is considered obsolete. Modern web design practices have moved towards more flexible and accessible solutions like CSS Grid and Flexbox.
Implementation
Example 1: Basic Frame Layout
In the days when frames were popular, a basic layout might look like this:
<frameset cols="25%,75%">
<frame src="sidebar.html">
<frame src="main-content.html">
</frameset>Example 2: Nested Frames
You could even nest framesets to create more complex layouts:
<frameset rows="50%,50%">
<frameset cols="25%,75%">
<frame src="top-left.html">
<frame src="top-right.html">
</frameset>
<frame src="bottom.html">
</frameset>
Attributes Table
| Attribute | Description |
|---|---|
src |
Specifies the URL of the document to show in the frame |
name |
Specifies the name of the frame |
noresize |
This prevents the user from resizing the frame |
Global Attributes
The <frame> tag does not support global attributes as it’s obsolete.
Event Attributes
The <frame> tag also does not support event attributes.
Browser Support Table
| Browser | Support |
|---|---|
| Chrome | No |
| Firefox | No |
| Safari | No |
| Opera | No |
| IE | Limited |
Default CSS Settings
Since the <frame> tag is obsolete; there are no default CSS settings for modern browsers.
Conclusion
While the <frame> tag is a thing of the past, understanding its historical usage can provide context for how web design has evolved. It’s not recommended for new projects, but you may encounter it when dealing with legacy code.
The modern web has moved on to more accessible and flexible layout methods, leaving frames behind as a relic of a bygone era.