Create an iframe with these simple tools and references.
Everything you need to build your own iframes
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.
Reference Guide for basic HTML tags for iframes.
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:
- Opening tag
- iframe page source
- height of the iframe
- width of the iframe
- Non-iframe content (What to display in the users' browser if they are not capable of viewing iframes.)
- 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 framebordersCode:
page-1 | page-2 <--You can navigate by clicking on these links.
Iframe without framebordersCode:
page-1 | page-2
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.
KEY: Doctype: S=Strict, T=Transitional, and F=Frameset.
|Attribute||Value||Description & use||Doctype|
|0 = no border around the frame, 1= border.
|Specifies the height of the iframe
height="100" or height="100%"
|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|
|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|
|Specifies the width of an iframe||TF|
The <iframe> tag supports the following attributes:
|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...
Can I get a virus from an iframe?
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?
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.
Frequently Searched Terms:
- auto-resize iframe
- disable iframe
- dynamic height iframe
- google iframe
- how to iframe
- html iframe
- iframe attributes
- iframe alternative
- iframe auto-height
- iframe browser
- iframe button
- iframe code
- iframe content
- iframe name
- iframe pages
- iframe parent
- iframe pdf
- iframe resize
- iframe scrollbars
- iframe scrolling
- iframe trojans
- iframe width
- link iframe
- refresh iframe
- No horizontal scrollbars
- zero frame
Can my iFrame automatically expand to fit my page's content?
Yes, if the internal pages are on your own domain. Otherwise, you can also do it with a bit of PHP.
See our "scripts" page for details about how to use an automatically resizing iFrame to contain dynamic content.
You can get around this by regenerating the page on your server using PHP, and then inserting the generated PHP page into the iFrame.
iFrame or PHPinclude?
As like everything else in web development, there is a lot of flexibility and the developer must decide how to present the content to the end user.
iFrames are most famously used by Digg and Google - but many sites use them to present dynamic content.
iFramed content - if it is your own does not help your SEO - so if squeezing the last bit of potential for pure SEO purposes is your main goal, you might want to look at server side includes.
The best decision is an informed one, so look into both solutions before settling upon one. Neither one is the right choice for absolutely every situation.
Beginners can have fun with iFrames and their results will look almost like AJAX. For example, here is a simple trick to hide the answer of a joke or question using an iframe. The iframe is displayed without a frameborder and using the same background color as this page. When the answer button is clicked, it loads in the invisible iframe. Try it!
Q: What's Black and Brown and would look good on a lawyer?