Working With Frames in HTML

By: Daniel Imbellino
Updated: March 10, 2013

HTML frames can be used to make creative layouts for your website. One of the benefits of using frames is that you can create links in one frame, and then point the content of those links to open in another frame, all on the same page. Be advised though, frames present many disadvantages as well. For one, if somebody decides to bookmark a page on your site, when they try to connect to it later all they get is that one single page, and not the entire frameset! This effectively breaks your site! You can include the meta tag on all pages of your site so that search engines won’t display those pages in your search results. This way, the only page that can be retrieved from search engines would be your index.html page. This presents another problem, your index page is your “frameset” page, and frames do not themselves contain any content for the search engines to match to a users search query! That being said, you should only use frames when designing say, a website for a family photo album, etc. For a professional E-commerce, or informational type of site, do not use frames, otherwise you will have a lot of headaches.

You create a frameset by first declaring a set of frameset tags like this:

<html>
<head>
<title></title>
</head>
<frameset>
(Your Frames here)
</frameset>
<html>

You create frames with horizontal columns and vertical rows:

<frameset cols=”185, *”> This specifies to create a horizontal frame that is 185px wide, along with a another horizontal frame that uses the rest of the screen.

The asterisk * is used to specify to use whatever space on the screen is remaining for the following frame.

<frameset rows=”185, *”> This specifies to create two vertical frames, the first spanning 185 pixels from the top of the screen down, and the second taking whatever space vertically is left.

After declaring your framesets you then create frames that will encompass the dimensions specified in your frameset, using the <frame> tag:
<frame src=”links.html” />

Here’s a full example of a framed website:

<html>
<head>
<title></title>
</head>
<frameset cols=”125, *” >
<frame src=”banner.html” scrolling=”yes” name=”sitebanner” noresize=”noresize” frameborder=”1” />
<frameset rows=”90, *”>
<frame src=”links.html” scrolling=”yes” name=”sidebar” noresize=”noresize” frameborder=”1” />
<frame src=”mainframe.html” scrolling=”yes” name=”mainframe” noresize=”noresize” frameborder=”1” />
</frameset>
</frameset>
</html>

Here’s what we did, we created a “nested” frameset by specifying the use of one frame directly after the other, hence the 2 closing frameset tags as shown above. Out first frameset consisted of 2 horizontal columns, one being 90px, and the other taking whatever space was left. In our example, we specified only one frame to be used for the frameset columns (90px), and disregarded the other.

In the other frameset, we specified 2 rows of vertical frames, the first being 180px, and the second taking up what’s left of the screen vertically. We then created 2 frames, “links”, and “mainframe.” When you create a set of frames within a frameset, the frames are displayed in the order of precedence to which frame was defined first. We defined the “links” frame first in our example, followed by the “mainframe” frame. So, our “links” frame is 180px, while our “mainframe” is whatever space is left after that 180px vertically.

Notice the scrolling=”yes”, and noresize=”noresize” attributes. You can specify if you want user to be able to scroll through the content on that particular frame, and you can use the values of “no” or “yes” to determine this. If you don’t want users to be able to resize a particular frames border on your site, then use the “noresize” attribute to specify this. Also, we assigned a name to each of our 3 frames, this is so that we can reference those frames from links in our sites pages. Assigning names to our frames creates a point of reference for our pages content.

Now, we created the frameset, which would be our index page. We could assign this page the name of “index.html”, to reference it as such. Also notice we haven't defined any content for our frameset, we merely defined its layout.

example of an HTML Frameset

We assigned an HTML file to each frame. We also assigned a name to frame, so that we can reference it from our target links. For example, we could point all of our links from the "links.html" file to open in the "mainframe.html" window like so:

<a href="xhtml-tutorials-part-one.html" target="mainframe">XHTML Tutorials Part 1</a>

We specified an anchor tag that references another webpage. We then used the anchors target attribute to point to our framesets center frame (mainframe.html).