Disadvantages of HTML Frames
Using HTML frames can be a very useful way of organizing the layout of a website. This is especially true if the website contains a lot of reference material.
While there are many advantages of using frames, there are also disadvantages. Some of these disadvantages can have a major impact on the usability and popularity of your website.
Before you build a frames based website, make sure you're aware of these key disadvantages of using HTML frames.
Frames are Not "Search Engine Friendly"
Most (if not all) search engines are unable to index frames-based websites properly. Because frames are made up of multiple pages, only one frame is indexed at a time. It's not indexed within context of the other frames. This often means that, when someone finds your website via a search engine, your website looks wrong. All they see is the right frame, or the left frame, or whichever frame came up in the search results.
Some web developers overcome this by programming special code to replace a single frame with the frameset. But this does take extra time and effor, and you do need to know what you're doing.
Frames are Not "URL Friendly"
Typically with frames based websites, all pages share the same URL. For example, if your homepage is located at 'yoursite.com', when you click through to other pages on your website, the URL won't change. Normally, (i.e. with a non-frame website), the URL would change to something like 'yoursite.com/about_us.html' (or whatever the page is called). But with a frames-based website, the URL would remain at 'yoursite.com'.
This causes problems if someone tries to bookmark a page. If they click through to a subsequent page they find useful, they might want to bookmark it. Problem is, instead of bookmarking say, 'yoursite.com/about_us.html', they would be bookmarking 'yoursite.com' - the homepage!
When this user accesses their bookmark at a later date, they will need to drill down from the homepage again... Not very user-friendly!
Again, this problem can be overcome by programming techniques, but you need to know what you're doing.
Frames are Not as Accessible
Although most modern browsers support frames-based websites, not all do. It is for this reason that you should always implement a 'noframes' version of your website for user agents who are unable to view the frames-based version. You implement a 'noframes' version by using the noframes tag.
For the benefit of users who rely on assistive technology (such as screen readers), you should always ensure your frameset has a title. You should also ensure that each frame has been named appropriately (for example, "Navigation" or "Content").
(Traditional) Frames are Not Supported by HTML5
HTML5 does not support frames — at least, not traditional frames.
The <frameset>
and <frame>
tags (not to mention the <noframes>
tag) have all been eliminated from the HTML specifications. This means that if you want to be HTML5 compliant, you won't be able to use these elements.
However, this does not mean that HTML5 doesn't support the functionality of frames.
The Good News!
There's actually a way of creating frames-based websites that overcomes most of these disadvantages.
By using CSS, you can achieve a frames-based website without going anywhere near a <frameset>
or <frame>
tag.
The secret (or perhaps not so secret) ingredient is the overflow
property. By applying this to your <div>
elements (or other elements such as the <nav>
, <header>
, and <footer>
elements), you can provide the functionality of frames, without most of the disadvantages listed above.
Check out these frames templates to see how this works (and to download a template).
Conclusion
While HTML frames have their disadvantages, these disadvantages can be overcome with a little planning and some extra work. As long as you're aware of these disadvantages before you begin your frames-based website, you'll know how to deal with each issue.
And if you already have a frames-based website, now's a good time to review it to ensure that you've got these issues taken care of.