<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 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 March 29, 2015