First, notice a few things. There are no scrollbars simply because the content of my inline document does not span that far. If it did, scrollbars would appear on the right hand side. Additionally, any HTML code works fine within iframes, because the iframe is including another physical HTML page. In essence, we are embedding an entire page within a little window.

Next, let's examine the syntax of the iframe.

Inline frame syntax

The iframe takes some of the same attributes that any other HTML element takes, like width, height, src and align. Taking our above iframe as our example, here's the code required to pull that off.

<iframe src="url/to/document.html" width="100%">
Sorry, your browser does not support iframes.
</iframe>

The inline frame syntax starts by identifying the name of the element, or 'iframe'. Then, we specify the source file that will be displayed (embedded) within the iframe. I've set the width to 100%, which will span 100% of the main table in this case. The 'Sorry, your browser does not support iframes.' text will only display if the browser does not support the iframe element. Then, we simply end our iframe tag set.

While we are looking at the syntax, let's take a look at some of the other attributes that the iframe element supports.

• Name: names the iframe element

• Src: location of source document

• Longdesc: long description of content

• Height/Width: sets dimensions of element

• Frameborder: sets iframe border (0 or 1)

• Align: top, bottom, middle, right and left

• Marginwidth: padding within iframe (left, right)

• Marginheight: padding within iframe (top, bottom)

• Scrolling: takes values of yes, no or auto

The syntax of the iframe is very straight forward. Although you don't have to specify all of these, you must use the 'src' attribute so the iframe knows which document to include. Alignment, unless otherwise stated, defaults to left and scrolling defaults to auto. Frameborder defaults to 1 and marginwidth/marginheight defaults to about 5 each. The 'Longdesc' attribute is a decent supplement to the Title tag, which offers visually impaired users a description of the content.

So, if I want to design an iframe with the name "MyIframe", 100% width, aligned in the center and with both marginwidth and marginheight set to 10, here's what the code looks like:

<iframe src="url/to/document.html" width="100%" align="center" marginheight="10" marginwidth="10" name="MyIframe">

Sorry, your browser does not support iframes; try a browser that supports W3 standards.

</iframe>

Now that we know what an inline frame is, what it looks like and how to code it, which browsers support this element? We'll examine it below.

Browser support for iframes

• IE: IE appears to support the iframe since version 4 (Mac since version 3)

• Netscape: version 6 and later

• Opera: the 4.02 beta is said to support iframes (Mac and Unix since version 5; BeOS since version 3.62)

• Mozilla: since version 1

• Bezilla: since version 1

• Galleon: since version 1.2

• WarpZilla: since version 1

• Lynx: support since 2.8.2

Where should iframes be used?

Iframes are especially useful for displaying larger amounts of information in a small space. Because iframe elements support scrolling, the user can view many pages of information without having to scroll the main page at all. Because iframes support the same HTML as any other document, including images, links and CSS styles, users can unleash the power of iframes and create an extremely efficient display of information.

NOTE: Links clicked within the iframe element will change the iframe page, NOT the main page. To change the main page from a link within the iframe element, use target="_parent" in the embedded iframe page.

You should now be able to design an iframe, link it to the appropriate file and set their attributes accordingly. Be sure your target audience supports the iframe element by a large majority and have fun. They can become beneficial design elements if used appropriately.

Articles from WebSiteGravy.com