iFrame HTML is simple to master. Don't believe everything you read about iFrames - they are not out-of-date; after all, Google uses them for its Custom Search Engine (CSE). They are useful for many types of content from generated content which will appear on the page as if it were AJAX, as well as to replace the PHP Include function for certain types of content. These pages will show you exactly what you need to use iFrames like a pro.

iFrame HTML Basics

Reference Guide for basic HTML tags for iframes.

IFrames are useful for a wide variety of content and especially for in-site navigation where you can use on to load pages or code snippets dynamically on a page without being an AJAX programmer and without using any javascript.

If you combine PHP with JavaScript you can do many things which almost look like AJAX - but are far simpler to implement as the only knowledge you would need is HTML and just a little bit of PHP for more advanced scripts.

If you don't want to bother learning all of the below specifics, just go to our iFrame Generator and generate an iframe now.

Basic IFrame HTML

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.


iframe Browser Support

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

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

 

>>>Close this section...

 

iframe faq

 

 

Can I get a virus from an iframe?

YES!
Iframes are one of the favorite tools of hackers and malware distributors. Fortunately, most anti-virus software detects them easily.  → more>>>

Can I set an iframe to capture part of a screen?

No.
An iframe cannot work as a 'screenscraper'. The page will load from the top left corner down. You cannot use an iframe to capture a snippet of content.

Now, create optimal Meta Tags for your site easily!

meta tag generator

Generate a robts.txt file:
robots.txt generator