Inline frames are the only type of frame allowed in HTML5. They allow you to include content from external sources inside your web pages. In essence, an iframe is another browser window set right inside your web page.
How to Use the
IFRAME element uses the HTML5 global elements as well as several other elements. Four are also attributes in HTML 4.01:
src—the URL for the source of the frame
height—the height of the window
width—the width of the window
name—the name of the window
And three are new in HTML5:
srcdoc—the HTML for the source of the frame. This attribute takes precedence over any URL in the
sandbox—a list of features that should be allowed or disallowed in the frame window
seamless—tells the user agent that the iframe should be rendered like it is invisibly part of the parent document
To build a simple iframe, you set the source URL and the width and height:
<iframe src="URL" width="200" height="200">
Alternate text if the iframe cannot be rendered
There are also some attributes that are valid in HTML 4.01 but obsolete in HTML5:
longdesc—instead, use an
Aelement to link to a description
align—instead, use the CSS
allowtransparency—instead, use the CSS
backgroundproperty to make the ifram transparent
frameborder—instead use the
marginheight—instead, use the CSS
marginwidth—instead, use the CSS
scrolling—instead, use the CSS
IFRAME Browser Support
IFRAME element is supported by all modern browsers:
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
If no version number is listed, that is because all versions of that browser support it.
But while all browsers support the
IFRAME element, there is still limited support for some of the HTML5 features.
overflowto turn off scrolling is not reliable. If you don't want scrollbars on your iframes, you should continue to use the
seamlessattributes are not supported by any browsers.
Linking with Iframes
When you give your iframes a
id you can then point your links at that frame with the
target attribute on the
A element. Then, when a user clicks on the link, it will open inside the referenced iframe rather than the current window.
Try it yourself. Type the following into a web page:
<iframe id="myIframe" src="http://webdesign.about.com/#lp-main" height="200" width="500">
<p>This is my iframe
When you click <a href="http://webdesign.about.com/od/iframes/a/aaiframe.htm#abt" target="myIframe">this link</a> it will open a new document inside the above window.
If the document opened in the
IFRAME does not have any targets set then all it's links will open in the same iframe as the parent document.
You can use this feature to make links in one
IFRAME change the contents of another
IFRAME on the same page.
IFrames and Security
IFRAME element, by itself, is not a security risk to you or your readers. But it has gotten a bad reputation because it is often used by malicious websites to include content that can infect a visitor's computer without them seeing it on the page. This is done by having links point to the invisible
IFRAME and those scripts set off malicious code. The user clicks the link and thinks that the link is broken because nothing appeared to happen, but a script was set off where they couldn't see it.
The thing to remember when including an
IFRAME on your web page is that your users are only as safe as the content of all the sites you link to. If you have reason to feel a site is untrustworthy, don't link to it in any fashion and most definitely don't include its contents in an
IFRAME. But linking to your own pages within iframes does not pose a security risk for you or your users.