HTML Frameset Tag: Fully Explained With Examples

by

Virrage Images / Shutterstock.com

The HTML frameset tag is deprecated. But that doesn t mean it is completely extinct. You might find it on old websites to this day.

So, is it worth bothering with? Or should you forget this tag ever existed and move on to its modern counterparts?

Let s talk about this deprecatedHTMLtag and give it an honorable mention. We ll look at a few examples of the code in action, which browsers still support it, and we ll even offer up a few modern alternatives.

What is the HTML Frameset Tag?

The HTML frameset tag used to be a crucial part of laying out a website. They have been obsolete since HTML 5 came out in 2008. Before the advent of more powerfulCSS, you had to construct a page using frames and framesets. While today, we use <div> or <iframe> tags, and simply style them to get the layout we need.

Framesets were used to divide the browser window into separate sections, with each section capable of loading a different HTML document. They consisted of the <frameset> and <frame> tags.

Here s an example of how framesets might be used:

<!DOCTYPE html>
<html>
    <frameset cols="50%,50%">
        <frame src="frame1.html">
        <frame src="frame2.html">
    </frameset>
</html>

This example creates two vertical frames, each taking up 50% of the window s width. frame1.html is displayed in the left frame, and frame2.html is displayed in the right frame.

HTML frameset tag shown creating two columns of 50% width.
On the top, you can see the frameset code, creating two 50% columns, with the left one in blue. The bottom shows the resulting webpage. Note how additional CSS styling is done in each HTML file.

History-Computer.com

Modern Preference over the HTML Frameset Tag

In HTML5, we can use <div> elements styled with CSS to achieve similar layouts. The reason we do this on the modern internet is the separation of the presentation layer from the content layer.

Content is handled by HTML. Presentation is handled by CSS.

With frames, the presentation was being messed with right there in the HTML, which caused all sorts of issues. We ll dig into those issues in a second, but for now, here is how you would get the same effect with modern code:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .column {
                float: left;
                width: 50%;
                height: 100vh;
                overflow: auto;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="column" id="frame1">
            <!-- Content of frame1.html would go here -->
        </div>
        <div class="column" id="frame2">
            <!-- Content of frame2.html would go here -->
        </div>
    </body>
</html>

In this version, the <div> elements with the class column will each take up 50% of the window s width, similar to the frames in the frameset version.

Note that we re using the float: left; rule to position the columns side by side, and the box-sizing: border-box; rule to make sure any padding or border added to the columns does not increase their width beyond 50%.

The actual contents of frame1.html and frame2.html would need to be included in these <div> elements directly, unless you re loading the content dynamically with JavaScript.

At first glance, the modern equivalent of the frameset tag appears to require more code to work. So, how is this better? Why were frames so bad that they had to be replaced?

This is where the dark truth about frames comes into play.

Why is the HTML Frameset Tag Not Used Today?

The concept of frames in HTML had been criticized all the way back in 1996 when esteemed web usability expert Jakob Nielsenwrote a columnon the matter. Simply put, they are a web accessibility nightmare.

The first issue is that a webpage visitor arriving on a frame from a search engine won t have access to navigational elements present in another frame on the page. Since separate HTML files are loaded into independent frames, they often will fail to work properly when they aren t connected, hence the navigation issues.

Another issue is screen readers, and assistive technologies have a difficult time with frames. Since the advent of accessibility requirements, frames have completely fallen out of favor due to their incompatibility with screen readers. There really is no place for them in the modern web.

Frames often will not be able to print properly, either. The challenge of lining up all of the content within frames causes undesirable results when printed. As a result, most of the time, you will only be able to print one frame at a time.

To top it off, an HTML page that uses frames will have problems showing up on small devices. These days, that could be a death sentence for a website, since so muchinternettraffic is mobile.

So, is there any modern utility with the unique power of the frameset, but with none of the awful drawbacks?

The Modern Replacement to the HTML Frameset Tag

Frames have gone by the wayside. But the <iframe> remains healthy. The iframe tag is almost as old as the frameset tag, having been released in 1997.

While the iframe tag used to be more powerful, today, it is only used for a few specific tasks. Typically, you would encounter an iframe when you want to embed a particular function from a website s API, such as Google Maps or Facebook.

This is great when a developer wants to implement code from another web application without having to store that code on their ownserver. Instead, they use the iframe to display an API which will then show the end result. It could be a Maps widget or a Facebook news feed, or any number of creative uses.

Wrapping Up: HTML Frameset Tag

If you re learning web development, skip the HTML frameset tag. While it is still technically supported by many browsers, it comes with a slew of accessibility issues. If you re building a new website, you would be doing more harm than good by using frames at all.

Thanks to improvements in CSS, you can easily create much better layouts without using HTML frames.

Leave a Comment