left-pointing arrow for navigating to previous page

HTML Tutorial: Frames

right-pointing arrow for navigating to next page

Frames are typically listed as an advanced topic, a practice I've followed here, but only half-heartedly. Frames are easy. They let you divide the physical page into frames, each of which displays its own HTML page. They are also controversial.

Don't Use Frames

When frames were new, webmasters were advised to stay away from them because many users' browsers didn't support them. Probably true enough a decade ago, but hardly relevant today.

There still are search engine issues. My navbar frame is simply a set of standard hyperlinks to each of the pages in this site. Google's web crawler will have no trouble finding all the pages. There are lots of JavaScript and other programs that provide fancier menus. Many are available as free downloads and some of them don't require any knowledge of JavaScript to use. Warning: if you use these, Google (and the other search engines) may not be able to find your pages. Again, Google for "robots.txt" and follow the instructions to get around this problem.

What you should do, the anti-framers say, is repeat the navigation information in each page.

Use Frames

Suppose one of you emails me with a helpful suggestion about some topic I've overlooked. "Yes," I think, "I should really add ...". I create the page on the new topic and update the navbar page.

What would be the case if the navbar data was embedded in each of the two dozen pages in this site? Right. Two dozen places to go to update the navbar. What is the chance of error in making the same update in each of two dozen places?

My Position

That should be obvious. I've used frames for this site. I like frames. They're easy and they let you keep things like navbars and banners in a single place. You make your own choice. If you decide to use frames, this is how.

The Frame ( <frame> ) and Frameset ( <frameset> ) Tags

A frame is a portion of the page that can display an HTML page. A frameset is a set of frames. Right?

The correct statement about a frameset is that it is a set of other frames and framesets. The page you're looking at has a banner across the top, a navbar on the left and then the main area where you read these words. The navbar and the main area are one frameset. Call it "navMain."

Frameset "navMain"
Frame "navbar" Frame "main"

The banner and navMain are the outer frameset, this way:

Outer Frameset
Frame "banner"
Frameset "navMain"

Frameset HTML

This is the HTML from "html-tutorial-start.html" that sets up these frames and loads their initial content: 

    <frameset rows="100px, *" border=0>
        <frame
            name="html-tutorial-banner"
            scrolling="no"
            src="html-tutorial-banner.html"
            frameborder=0>
        <frameset cols="120px, *" border=0>
            <frame
                name="html-tutorial-navbar"
                src="html-tutorial-navbar.html"
                frameborder=0>
            <frame
                name="html-tutorial-main"
                src="html-tutorial-main.html"
                frameborder=0>
        </frameset>
    </frameset>
Frames work in the head section, not the body.¹

The attribute rows="100px, *" assigns heights to the enclosed content. In this case, it's 100 pixels for the banner row, whatever's left for the second row. Similarly, cols="120px, *" allocates 120 pixels for the navbar and the rest are for the main frame.

Navigating Across Frames

I always make the same mistake when I set up a navbar. This is a link in the navbar, the wrong way: 

<a href='whatever-page.html'> Whatever </a>
A click on that link neatly replaces the content of the navbar frame with the href'd page. You want, of course, to replace the content of the main frame, leaving the navbar intact. That's another use for the target attribute. 

<a href='whatever-page.html' target='name-of-main-frame'> Whatever </a>

Use Frames

You are frame-wise but not frame-enabled. You get to the latter by creating and using frames. Now would be a good time to try. Create a banner (right-click this site's baner and choose This Frame/View Frame Source). Add a navbar with nothing but links. Then move the content of index.html to a new page (e.g., main.html). Define framesets and frames in the head section of index.html (copying mine is not only allowed, it's encouraged) and try it out. Good luck.

You are now frame-enabled. A word about frames: you get them set up and then you forget about them. Chances are excellent that you will have forgotten how they work by the next time you need frames. Just remember the HTML Poster. It's rescued me often.

You don't need to know CSS stylesheets to build a website, but next I'll give you an introduction.

Do it with style!

¹Per the official specification, a frameset may be used in lieu of the body section. But I told you long ago that HTML only had two sections, so let's not confuse the issue. Framesets work in the head section.