The Latest on HTML Frames

As web designers, we all want to work with the latest and greatest technologies. Sometimes, however, we are stuck working on legacy pages that, for one reason or another, cannot be updated to current web standards. You see this on certain software applications that may have been custom created for companies many years ago. If you are tasked with the job of working on those sites, you will undoubtedly get your hands dirty working with some old code. You may even see a <frameset> or two in there!

The HTML <frameset> element was a fixture of website design some years ago, but it is a feature you rarely see on sites these days — and for good reason. Let's look at where support for <frameset> is today, and what you need to know if you are forced to work with frames on a legacy website.

The <frameset> element is not supported in HTML5. This means that if you are coding a webpage using the latest iteration of the language, you cannot use HTML frames in your document. If you want to use a <frameset> in your document, you must use HTML 4.01 or XHTML for your page's doctype.

Because frames are not supported in HTML5, you will not be using this element on a newly built site. This is something you will only encounter on those aforementioned legacy sites.

The HTML <frameset> tag is different than the <iframe> element, which is still supported in HTML5 and which creates an inline frame on a webpage. These frames are often used to display content like Google Maps or YouTube videos on your page. iFrames are ok and are used quite a lot on the Web today.  

OK, so everything about frames being obsolete having been said, what happens if you do need to work with these old pieces of HTML?

If you are using an older doctype and you do want to use HTML frames, there are some common problems that you should be aware of. One of those issues is getting the links to open in the correct frame. This is called targeting. You give your anchor tags a "target" to open their links in. The target is usually the name of the frame.

<frameset rows="40,*">
<frame src="frame1.html" name="nav">
<frame src="frame2.html" name="main">
</frameset>

In the above frameset, there are two frames, the first is called "nav" and the second is called "main". We can imagine that the nav frame (frame1.html) is navigation and all links within it should open within the main frame (frame2.html).

To do this, you would give the links in frame1 the target of "main". <a href="page2.html" target="main">. But what if you don't want to add the target to every link on your navigation page? You can set a default target in the HEAD of your document. This is called the base target. You would add the line<base target="main">to your head of the frame1.html page, and all links will then open in the main frame.

One of the most misused sections of the frames tag is noframes. This tag allows people with frames incompatible browsers to view your page (this does not work for HTML5, just for really old browsers without frame support — so you can't try to cram this into HTML5 to make it work. Nice try, but no luck.), and that is the ultimate goal, isn't it?

In a typical frameset, the HTML looks like this:

<frameset rows="40,*">
<frame src="frame1.html" name="nav">
<frame src="frame2.html" name="main">
</frameset>

This will create a page with two frames, the top being 40 pixels tall and the bottom being the rest of the page. This would make a nice top navigation bar frameset with the branding and navigation in the 40-pixel frame.

However, if one of your viewers comes to your site on a frames incompatible browser, they get a blank page. The chances of them returning to your site are pretty slim, and to make it viewable by them you need to add four more lines of HTML:

<noframes>
This site is framed, but you can <a href="frame2.html">view a non-framed version</a>.
</noframes>

Because you are pointing to the content portion of your frameset (frame2.html) in the noframes portion of the page, your site becomes accessible.

Keep in mind that while you may be using the latest version of your favorite browser, your audience may not want to continually download the latest software. Their machine may not support it, or they may not have room to install a 20+ Meg program on their hard drive. Adding four lines of HTML is a simple solution.

Original article by Jennifer Krynin. Edited by Jeremy Girard.