Note: This write-up isn't about HTML itself nor about iframes. It's just about frames, a part of HTML. You should have at least some elementary knowledge of HTML (means e.g. how a simple HTML page is made) to understand the what about of this write-up.

Since HTML 4.0, frames have been part of the official HTML standard by the W3C. Well. But what are frames exactly? You may imagine frames as a way to divide a page into several pieces (frames). In each of these frames a different html document can be loaded, and for that reason frames are often used for web sites with one frame for a navigation bar and another frame for the actual content of the site.

Frames have advantages as well as disadvantages. And before you just learn more about frames, you should ask yourself if you really can use frames for your web site, or not. I tried to collect a brief list of advantages vs. disadvantages of frames:

  • Advantages: You can divide your page into several sections, and some sections always stay in the same place (e.g. good for navigation bars on the bottom of a page). If you want a lot of sections on your page, frames can also be useful. Plus, frames can be displayed by all browsers which are capable of HTML 4.0.

  • Disadvantages: Frames can't be displayed by some text-only browsers (like Lynx). The border of frames may steal space. Often, a page with frames has a somewhat square-ish design. With frames, all pages of your web site have the same title, which complicates the orientation. It's also harder to link to a specific site of your web site, and, as with a direct link to a document (like the ones from a search engine) the other frames aren't displayed, a further navigation on your site may fail. Blind people also may have trouble with navigating through your page. And if that weren't enough, some users may get confused over the back and forward button, which will work for each frame individually.


  • If you now think frames aren't what you were looking for, maybe one of these alternatives can help you: iframes, tables, css, java script, java, flash, shockwave, php, perl, asp, sql or rebol.


    Still here? Ok, let's start. As I said, frames are not really new pages, they are more just a way to put several html documents together into one page. First, a special html page must be made. In this special html document is a so-called frameset, where you can specify which html documents you want to use and also in which way you want the design to look like. This html site with the frameset is the first page you must load in order to display the frames, so if you want to use frames on your entire web site, it's best to call this new document with the frameset index.html

    But how does such a html page with a frameset look? Let's create one:

    It should start with a doctype line, telling the browser that this site hosts a frameset according to the HTML 4 standard.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

    This doctype line will work fine in most cases, however, for more information you can take a look at: http://www.w3.org/TR/html401/sgml/dtd.html

    After the doctype tag, the page continues as every normal HTML page, with the following tags:
    <HTML>
    <HEAD>
    <TITLE>here you should write a title for your web site</TITLE>
    </HEAD>

    Let me make just one addition: The title you set in the frameset page is used for every document of your page which will be loaded in a frame, so think of a good and general title.

    Now we come to the first variation from a normal HTML page structure, instead of the <BODY> tag a special frameset tag is needed, which looks like:
    <FRAMESET arguments>
      <FRAME arguments>
      <FRAME arguments>
    </FRAMESET>

    With the arguments in the <FRAMESET> and <FRAME> tag, you can issue instructions of how your page should look, but I will come back to this matter later. For now, just note that the <FRAMESET> defines how many frames a page has, while the <FRAME> tag is used for commands about each frame. Also important is that the <FRAMESET> tag needs a closing </FRAMESET> tag, while the <FRAME> tag doesn't.

    As some browsers (e.g. Lynx, Netscape Navigator >2.0 and Microsoft Internet Explorer (MSIE) >3.0) can't display frames, it's polite to give the user of these browsers at least a clue why they can't see your page. And for exactly that reason there's a tag, the <NOFRAMES> tag. Between the starting <NOFRAMES> and the closing </NOFRAMES> tags, you can put a short message (or possibly even a non-framed version of the page) which will be only displayed if the browser can't display frames:
    <FRAMESET arguments>
      <FRAME arguments>
      <FRAME arguments>
      <NOFRAMES>
    E.g. "sorry, your browser can't display frames. Please update to a newer version."
      </NOFRAMES>
    </FRAMESET>

    After that, the first page is almost done, only the closing tag of the whole page shouldn't be forgotten:
    </HTML>

    So, your document should be:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
    <HTML>
    <HEAD>
    <TITLE>here you should write a title for your web site</TITLE>
    </HEAD>
    <FRAMESET arguments>
      <FRAME arguments>
      <FRAME arguments>
      <NOFRAMES>
    E.g. "sorry, your browser can't display frames. Please update to a newer version."
      </NOFRAMES>
    </FRAMESET>
    </HTML>

    Now we have the rough structure done. However, this is still useless, as the arguments of the <FRAMESET> and <FRAME> tag have to be done. I'll first explain the <FRAMESET> tag.

    Frames can be done in two ways - as horizontal frames or as vertical ones (of course these two types can be mixed). Why not create two vertical frames, one with 20% width, and the second one with 80%. As vertical frames are like columns, the argument for them is cols:
    <FRAMESET cols="20%,80%">

    Important is that the two values are separated by a comma. You can also use pixel values instead of percentages:
    <FRAMESET cols="300,724">

    This would make a column on the left with a 300 pixel wide and the next column with a wide of 724 pixels. That's ok, as long as your visitor's screen resolution has also a width of 1024 pixels. If the visitor has a smaller resolution, the browser will decrease the size of the frames proportionally. This often doesn't look great, and so you may either accept that, stick with percentages (which I would advise you) or have one frame fixed with a 300 pixel wide and the other frame without a specific wide, so the frame will be filled in the remaining wide of the browser window:
    <FRAMESET cols="300,*">

    Oh, and of course a frameset isn't limited to two columns, you can use as many as you want, just separate them by commas.

    Horizontal frames are now easy, instead of columns (cols) we need rows. A frameset with three horizontal frames, one on the top of the page with 20% height, the frame in the middle with a height of 60%, and the last one on the bottom with 20% height:
    <FRAMESET rows="20%,60%,20%">

    The values for the rows may also be given in pixels.

    Rows and columns may also be mixed together. Let's do a frameset where we have on the left side of the screen a 20% wide vertical frame, going over the full height of the screen, and left to this frame two horizontal frames of each 50% width.

    For doing such a frameset, you must know how this works: As we want one of the frame to have the full vertical height, we first have to create a frameset with two vertical columns, otherwise (with horizontal rows) a frame couldn't go over the whole vertical height. The first frame will be fine, and in the second frame we will subordinate a new frameset for the two horizontal frames. So, start with the vertical frameset:
    <FRAMESET cols="20%,80%>

    Remember how this would continue, if it were only a simple vertical frameset:
    <FRAMESET cols="20%,80%">
      <FRAME arguments>
      <FRAME arguments>
    </FRAMESET>

    Now, the first frame has a 20% width and goes all over the full height of the page. Perfect! What we still need to do is to replace the second frame with a frameset which builds two horizontal frames inside the second frame. For that, just create a normal frameset for horizontal frames:
    <FRAMESET rows="50%,50%">

    Also here, remember that this is in fact:
    <FRAMESET rows="50%,50%">
      <FRAME arguments>
      <FRAME arguments>
    </FRAMESET>

    Hence we only replace the second <FRAME> tag of the first <FRAMESET> with the above tags, and your frameset should look like this solution:
    <FRAMESET cols="20%,80%">
      <FRAME arguments>
      <FRAMESET rows="50%,50%">
        <FRAME arguments>
        <FRAME arguments>
      </FRAMESET>
    </FRAMESET>

    Ok, to make sure you understand how it works, let's try a frameset with a horizontal, 10% height, frame over the full length of the bottom of the page, and above that frame two vertical frames with 30% and 70% length. In this case, the horizontal framset have to be done first, then directly the frameset for the two vertical frames and finally comes the <FRAME> for the last (10% height row) bottom frame:
    <FRAMESET rows="90%,10%">
      <FRAMESET cols="30%,70%">
        <FRAME arguments>
        <FRAME arguments>
      </FRAMESET>
      <FRAME arguments>
    </FRAMESET>

    With this, you know as good as everything about the <FRAMESET> tag, beside the command for giving the border of your frames a colour, and here we go:
    <FRAMESET arguments bordercolor="#000000">

    The bordercolor can be specified like in normal html, so either with a six digit value or the name of the colour, as in bordercolor="black" Lists with some colour values as well as names are at Named HTML Colors (Superdoc) or at http://amiga-news.de/farben.shtml

    After the <FRAMESET> tag, the <FRAME> tag is the next one. The basic function of a <FRAME> tag is to load the document into the frame, so the address must be given with the src (short for source) argument, e.g.:
    <FRAME src="navigation.html">

    or:

    <FRAME src="http://www.mydomain.com/html/navigation.html">

    That's the simple way. However, as you might have more frames and want several pages loaded into a specific frame, each frame needs an unique name to be identified for further use:
    <FRAME src="navigation.html" name="navigation bar">
    <FRAME src="content.html" name="content">

    Now, as every frame has its own name, you can load other documents in another frame. Let's say you have a link in the "navigation bar"-frame to a document (links.html) you want to be loaded in the "content"-frame, then your link should be:
    <A HREF="links.html" target="content">Go to my links</A>

    Only the target argument is important here. When you want to load a document in the same frame as the document with the link already is, no target is needed, as links without targets are loaded in the current frame.

    As a gentle noder, you should have on the now loaded links.html file a link to everything2.com - you have one, right?! Anyway, a normal link would be:
    <A HREF="http://everything2.com/">everything2.com</A>

    However, as said before, if there's no target at all, the document is loaded in the current frame, and so would - in this case - everything2.com be loaded in the "content"-frame, while the "navigation bar"-frame would still remain. This is bad style, not only could it mess up the design of the other page (e2!) and give the visitor less space to read on, but it often seems as if you want to claim the content of the other site as your own. Bad idea, to avoid that, there are mainly two possibilities:
    <A HREF="http://everything2.com/" target="_new">everything2.com</A>

    This will open a new browser window where e2 is loaded. Instead of _new, you could use every other name for the target, such as _afkhasdjkfhjkshfk, as long as the name of the target isn't defined as a name in one of your framesets. But when you have a second link and set the target also to _new, the second page will be loaded over the first one, so it's not that bad to give each link an unique target name, e.g. for everything2.com target="_e2" and for the second link target="_2nd", and there's no longer any chance of unwanted overloading.

    If you don't want the link to be opened in a new browser window, but want your frames to disappear though, there's one target destination for this:
    <A HREF="http://everything2.com/" target="_top">everything2.com</A>

    A _top target will "close" all your frames and then load e2 in the same, but now blank browser window. Note: I often read that a target="blank" argument has the same effect, but it never worked for me.


    Scrollbars are normally only shown when they are needed. You might choose to always enable or always disable scrollbars. This option has to be set for each frame. Be carefully with always disabling the scrollbars, even when this may look better to you, it might cause some trouble for visitors with other screen resolutions.
    The scrollbar always enabled:
    <FRAME src="navigation.html" name="navigation bar" scrolling="yes">

    or always disabled:
    <FRAME src="navigation.html" name="navigation bar" scrolling="no">

    In the frame tag you can also define the distance (in pixel) between the frame borders and the place where the text should start. If you want, for example, the text to have a spacing of 20 pixels from the vertical borders, use:
    <FRAME src="somewhere.html" marginwidth="20">

    Mind that this will create a spacing of 20 pixel on both the left and the right side. For having a spacing of 30 pixels from the top and the bottom of the frame border, write:
    <FRAME src="somewhere.html" marginheight="30">

    To me, it seems as if it's a good idea to have at least a margin height and width of 10 pixels per each frame.

    The visitor of your site can normally change the size of each frame if he wants it. If you want to prevent that, add this argument:
    <FRAME src="somewhere.html" noresize>

    This will work, but if you want to write your page according to the XHTML standard, the argument line must be changed into:
    <frame src="somewhere.html" noresize="noresize">


    Most people especially don't like frames for their borders, which are per default always shown. Of course this can be changed, the correct HTML solution would be:
    <FRAME src="somewhere.html" border="0"> For disabling the border, or <FRAME src="somewhere.html" border="1"> for an explicit enabling of the borders.

    Well. As I said, would be. While some strict and/or newer browsers (like Opera or Mozilla) can interpret that correctly, Netscape Navigator as well as the Internet Explorer (MSIE) still widely use their own, different methods. The first difference is that they both use instead of each <FRAME> tag the <FRAMESET> tag.
    Netscape uses <FRAMESET border="0"> for a border of zero size (means no border will appear), while you may also use other pixel values for wider sizes, like <FRAMESET border="10">

    MSIE uses two arguments. The first one is a simple yes/no (1/0) argument about the 3D border of a frame, and if this border should be showed or not. <FRAMESET frameborder="0"> won't show the 3D border, <FRAMESET frameborder="1"> will show it. If you want to define only the border size (as we did for Netscape), the command for the MSIE is <FRAMESET framespacing="0"> for no borders, or any other pixel value for a bigger size, e.g. <FRAMESET framespacing="10">

    If you want no borders at all, the <FRAMESET> tag must be:
    <FRAMESET frameborder="0" framespacing="0" border="0">

    And don't change the sequence of this line, or it may not work for all browser versions.

    sources: SelfHTML - http://selfhtml.teamone.de/ (in German)
    The World Wide Web Consortium: http://w3c.org/
    Thanks to Apatrix for general help

    Log in or registerto write something here or to contact authors.