No-Frames Navigation System
Using <IFRAME>s

<IFRAME>s are also a powerful tool for webmasters. It's purpose is to allow you to insert the contents of an external file into your webpages - which is exactly what we want here.

The contents of the menu seen here on the left are stored in a separate, complete HTML file. You can update the navigation on your whole site, just by editing this single external file. It's even easier than using frames because you can add links to pages outside your own site without having to worry about them loading inside your frameset. And since the content of your <IFRAME> is simply an HTML document, it is as easy to create a menu page for this system as it would be for a page that uses frames.

<IFRAME>s are easy to use. Just insert an <IFRAME> tag similar to the following in your web pages where you want the menu to appear:

Then just change the name of the src file to the name of the file that holds the HTML code that displays your menu. It's best to use complete URLs here to avoid problems on pages where the source page is in a different directory than the menu file. And always remember to set the "target" attribute of your <a>nchor tags to "_top" so that the destination pages are displayed properly in the user's browser. I use a shortcut to handle the TARGET setting - the <BASE> tag. This allows me to create regular links on the page without having to remember to set a TARGET on each one.

As with regular <FRAME>s, it's a good idea to include a <NOFRAMES> section along with the >IFRAME> in order to provide clean, simple navigation links to your most important pages. View the source code for this page to see an example.

The advantages of using an <IFRAME> is that it doesn't require any services from the host server, the search engines read them with acceptable accuracy, and it doesn't require JavaScript support.

The downsides of using an <IFRAME> is that they're clumsy and inflexible. You're always dealing with width and height issues and are a nightmare when it comes to responsive design. A further problem is that the file that contains the navigation menu is not seen by browsers or search engines as a part of the parent web page. They are seen as separate, independent documents. This can have some impact on your search engine rankings. At present, the effects are difficult to understand, and the search engines are always changing their ranking methods. In addition, they can limit the flexibility of your webpage design because they require setting explicit width and height values. So you need to be aware of these aspects of <IFRAME>s.

<IFRAME>s for navigation are simple and usable if absolutely necessary, but I'm increasingly concerned about the effects on search engine rankings. On the whole, I would not recommend using this method unless you simply can't use PHP or Server Side Includes.

This page was last modified on August 27, 2020

Copyright © 2005-2024 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!