iFrame HTML is fairly straightforward. Below you will find a synopsis of the basic tags and attributes that you may use in your iframes. You can skip all of this and simply use our iframe generator - which also explains the utility of each of the options. The only thing we left out of our generator is style - if you are working with stylesheets, you probably know that a generator will not be much help there and would only probably further confuse you!

iFrame HTML Reference Guide

Reference Guide for basic HTML tags for iframes.

iframe Browser Support

The <iframe> tag is supported in all major browsers.

internet explorer firefox google chrome safari opera amaya

Differences Between HTML and XHTML

The iframe element is not supported in HTML 4.1 Strict DTD and in XHTML 1.0 Strict DTD.


Optional Attributes

KEY: Doctype: S=Strict, T=Transitional, and F=Frameset.

Attribute Value Description & use Doctype
frameborder 1
0
0 = no border around the frame, 1= border.
frameborder="0"
TF
height pixels
%
Specifies the height of the iframe
height="100" or height="100%"
TF
longdesc URL links to a page that contains a long description of the content of an iframe TF
marginheight pixels Specifies the top and bottom margins of an iframe TF
marginwidth pixels Specifies the left and right margins of an iframe TF
name name Specifies the name of an iframe - useful for navigation and dynamic loading TF
scrolling yes
no
auto
Specifies whether or not to display scrollbars in an iframe TF
src URL Specifies the URL of the document to show in an iframe TF
width pixels
%
Specifies the width of an iframe TF


Attributes

The <iframe> tag supports the following attributes:

Attribute Value Description Doctype
class classname Specifies a classname for an element STF
id id Specifies a unique id for an element STF
style style_definition Specifies an inline style for an element STF
title text Specifies extra information about an element STF

Bare minimum iframe code:

iframe code

  1. Opening tag
  2. iframe page source
  3. height of the iframe
  4. width of the iframe
  5. Non-iframe content (What to display in the users' browser if they are not capable of viewing iframes.)
  6. Closing tag


Sample iFrame HTML

Below is a demonstration of two iframes. One with frameborders, and the other without. You can dynamically load different content by clicking on the two links below each frame. Page-2 is with a colored background so that you can easily see the boundaries of the iframe in the borderless example.

To direct a link to open inside of an iframe, the code is simple. You merely name the iframe, and then set the link as shown below. We have named our iframe "test". We then set the link to open in target="test".

Iframe with frameborders

Code:


Output:

page-1 | page-2 <--You can navigate by clicking on these links.



Iframe without frameborders

Code:


Output:

page-1 | page-2


View just the code for these iframes and the navigation.

>>>Close this section...

 

iframe faq

 

Can I use the "Align" attribute.


The "align" attribute is being deprecated by the folks at W3C - the official standards organization for the World Wide Web.

Can I embed an iframe within an iframe?

Yes. You can use an iframe to contain sub-iframes. There are some translation pages which use this. Here is an example:

Translate Danish

They use nested iframes.

How can I load another page at say, the halfway mark?

Yes, if it is on your domain and you have access to the code. Simply insert an anchor tag and direct the iframe to open there.

See our example on our samples page.