Iframes: What are they, how to use them and which browsers support them

By Steve Adcock
2005-05-14


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

Tutorial Pages:
» Iframes: What are they, how to use them and which browsers support them
» What are iframes?
» Inline frame syntax
» Where should iframes be used?

Related Tutorials: » Enrich Your Web Applications » Microsoft Complicates HTML Emails With Outlook 2007 » Testing Your Forms for Hijacking Vulnerability » Control Your Domain Registration Data » HTML Forms POST, GET » HTML Tables