MF Web Services logo

HTML Help & Resources

Inline Frames

Frames, operationally speaking, can be of value to a website, if certain aspects of a page need to be refreshed or updated constantly. Using frames in this way can save a great deal of server bandwidth, as entire pages do not need to reload every time content needs to be updated.

However, use this feature wisely, and consider that search engines, crawlers and robots can have difficulties in assessing pages containing frames. The content inside of frames should be of little content value to your site, but provide a necessary resource for your visitors. For example, an inline frame could hold comments or quotes, extracted from a database, that are of little use, content wise to your site, but provide a visual reference for your visitors to examine while viewing and using the rest of your site.

Another common practice using inline frames involves pages that do not display content, but instead, perform a required service to the site. This method is used in order to avoid reloading an entire page for the sake of updating a server file or database, in which the end result does not involve displaying content, in which case these pages would be of no value to search engines.

Inline Frame Properties

  • NAME

    Important reference as it relates to a target for links. Name is case-sensitive and targets must reference the iframe name exactly. For example, NAME=“Myframe” is not the same as NAME=“myframe”.

  • CLASS/ID

    Using a CSS class, or an ID definition, enables you to define a style for your iframe.

  • HEIGHT

    Sets the height in pixels or a percentage of an available area. Avoid using percentages when possible, as the results can be inconsistent.

  • WIDTH

    Sets the width in pixels or a percentage of an available area. Avoid using percentages when possible, as the results can be inconsistent.

  • SRC

    Sets the URL to be displayed inside the boundaries of the iframe.

  • FRAMEBORDER

    Determines whether the iframe will have a border. Set to 0 if no border is desired.

  • BORDERCOLOR

    Sets the color of the iframe's border, if any.

  • MARGINWIDTH

    Determines the left and right margins inside the iframe.

  • MARGINHEIGHT

    Determines the top and bottom margins inside the iframe.

  • SCROLLING

    Determines whether the page can be scrolled. Values are NO YES AUTO. Auto makes the scrollbars visible only when the area of the page exceeds the containing area of the iframe, set by the WIDTH and HEIGHT properties.

IFRAME's must be used inside the document body, having both an opening and closing tag. An example of use below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
  <HEAD>
    <TITLE>Document Title</TITLE>
    ... META DATA ...
  </HEAD>
  <BODY>
  <IFRAME NAME="myframe" CLASS="ePage" HEIGHT="500" WIDTH="500" FRAMEBORDER="0" SCROLLING="auto" SRC="external_url.html"></IFRAME>
  </BODY>
</HTML>

In the above example, the inline frame would appear in the uppermost, top, left-hand, corner of the screen, extend 500 pixels in width and height, having no border, with scrolling determined automatically, and the source of the page being external_url.html. Of course, if the style class definition of “ePage” had defined a relative, or absolute position, or a margin, the iframe would appear according to that style definition.

Inline Frame's : Examples of use

Using the example below, you can see how inline frames are accessed, and utilized, within the context of a document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
  <HEAD>
    <TITLE>Document Title</TITLE>
    ... META DATA ...
  </HEAD>
  <BODY>
  <IFRAME NAME="myframe" CLASS="ePage" HEIGHT="500" WIDTH="500" FRAMEBORDER="0" SCROLLING="auto" SRC="external_url.html"></IFRAME>
  <A HREF="new_page.htm" TARGET="myframe">Show this page inside myframe</A>
  </BODY>
</HTML>

In the example above, the contents of “new_page.htm” will be displayed inside the inline frame “myframe”.

Move on to the Next Topic - Headings h1,h2,h3,h4,h5,h6.