HTML frames have historically been a powerful way to display multiple, independently scrollable sections within a single browser window. They enable web designers to keep certain elements—like navigation menus or banners—visible at all times, while other parts of the page can change dynamically or be scrolled separately. This technique was especially useful for creating complex layouts before the advent of more modern CSS and JavaScript solutions.
Despite their usefulness, frames are now largely considered outdated and are rarely used in contemporary web development. Still, understanding their structure helps developers appreciate how web page layouts evolved and how to work with legacy systems. Frames allow authors to present documents in various views, whether as independent windows or subwindows within a primary window, offering flexibility in designing user interfaces.
How Frames Work in HTML
Frames are defined using a special HTML document called a frameset document, which differs from standard HTML pages. Typical web pages contain a single HEAD and BODY, but frameset documents replace the BODY with a FRAMESET element that specifies how the window is divided. The FRAMESET element contains one or more FRAME elements, each representing a separate view or section of the page.
Here is a simple example of how a basic frameset layout might look:
“`html
“`
This layout creates two vertical sections: a narrow navigation panel occupying 20% of the width, and a larger main content area taking up the remaining 80%. Users can scroll or interact with each section independently, which helps keep navigation menus or banners constantly visible.
Layout Customization with Attributes
The rows and cols attributes of the FRAMESET element control the division of the window. For example, a single rows attribute with multiple percentages can split the window horizontally into multiple parts:
html
<frameset rows="50%, 50%">
<!-- content -->
</frameset>
Similarly, to create a grid of frames, you can specify both rows and cols. For example, a 2×3 grid:
html
<frameset rows="30%,70%" cols="33%,34%,33%">
<!-- content -->
</frameset>
When fixed sizes are needed, pixel values can be used, such as setting one frame to exactly 250 pixels:
html
<frameset cols="1*,250,3*">
<!-- content -->
</frameset>
Nested framesets further allow complex layouts, like dividing a section into smaller subsections, providing granular control over the page structure.
Handling Space and Resizing
If the sum of fixed lengths exceeds the available space, browsers will proportionally adjust the sizes. When no rows or cols are specified, a frame will automatically take up all remaining space, ensuring flexible layouts.
Sharing Data Among Frames
Developers can include shared data or scripts across frames using the OBJECT element, which can be accessed by scripts within individual frames. For instance, defining an object in the HEAD allows frames to interact with shared data or functions, facilitating dynamic content updates.
Defining Frame Contents with <frame> and <iframe>
Each individual frame’s content is specified via the src attribute, which points to the URL of the document to be loaded within that frame. The <frame> element is used inside a frameset, while <iframe> can be embedded within a standard HTML page to include inline frames.
For example, a frame loading a specific document:
html
<frame src="page.html" scrolling="no" frameborder="0">
The <iframe> element can be styled and resized more flexibly, and it supports attributes like width, height, and scrolling:
“`html
“`
Note that inline frames can’t be resized dynamically unless the noresize attribute is specified.
Accessibility and Alternative Content
Since not all user agents support frames, it is essential to provide fallback content within <noframes> elements. This alternative content ensures users can still access the core information even if frames are unsupported.
For example:
html
<noframes>
<p>This page uses frames, which your browser does not support. Please visit <a href="fallback.html">this link</a> for the content.</p>
</noframes>
Best Practices and Considerations
While frames provided a method for creating persistent navigation and complex layouts, they have several limitations:
- Bookmarking and URL Sharing: Frames make it difficult to bookmark specific sections because the URL reflects only the top-level document, not the nested frames’ states.
- Accessibility: Frames can cause issues for screen readers and other assistive technologies, making content less accessible.
- Search Engine Optimization: Search engines often struggle to index content within frames properly.
- Modern Alternatives: CSS-based layouts and JavaScript frameworks now provide more flexible and accessible ways to create dynamic, multi-section interfaces.
If you are working with legacy systems or maintaining old websites, understanding frames remains valuable. For modern web development, exploring web application UI design principles can help create engaging experiences without relying on outdated techniques.
Before hiring a web development partner, it’s also wise to review key considerations when choosing a web design agency. For organizations exploring SaaS platforms, knowing the top-rated SaaS design agencies can guide your selection process.
Though HTML frames are now largely obsolete, understanding their structure and implementation provides a foundation for appreciating how web layouts have evolved over time.
