HTML: <iframe> tag
This HTML tutorial explains how to use the HTML element called the <iframe> tag with syntax and examples.
Description
The HTML <iframe> tag allows you to embed another HTML page into your current page. This tag is also commonly referred to as the <iframe> element.
Syntax
In HTML, the syntax for the <iframe> tag is:
<body>
<iframe src="techonthenet.html">
<p>Sorry, this browser does not support iframes.</p>
</iframe>
</body>
TIP: Any text placed within the <iframe> tag will be displayed if the browser does not support iframes. In the syntax above, we've included a <p> tag to display a message if the browser does not support iframes.
Attributes
In addition to the Global Attributes, the following is a list of attributes that are specific to the <iframe> tag:
Attribute | Description | HTML Compatibility |
---|---|---|
align | Alignment of the iframe element | Deprecated in HTML 4.01, Obsolete in HTML5 |
frameborder | A value of 1 tells the browser to draw a border between the frame and other frames. A value of 0 tells the browser not to draw a border. | HTML 4 only |
height | Height of the frame In HTML 4.01, height can be in pixels In HTML5, height can be in either pixels or as a percentage |
HTML 4.01, HTML5 |
longdesc | A URI of the frame's long description | HTML 4 only |
marginheight | Number of pixels between the frame's content and the top and bottom margins | HTML 4 only |
marginwidth | Number of pixels between the frame's content and the left and right margins. | HTML 4 only |
name | Name of the element | HTML 4.01, HTML5 |
scrolling | Attribute indicating whether the frame should have a scroll bar yes: frame will display a scroll bar no: frame will not display a scroll bar auto: frame will have a scroll bar, as needed |
HTML 4 only |
sandbox | If attribute is an empty string, restrictions will be applied to the content in the frame. If attribute is not an empty string, it wil list space separated tokens of restrictions that are lifted. Valid tokens are: allow-forms: frame can submit forms allow-same-origin: iframe content will be treated as being from the same origin as the parent document allow-scripts: frame can run scripts allow-top-navigation: iframe can load content from the parent document |
HTML5 only |
seamless | Boolean attribute indicating that the browser can seamlessly render the iframe document so that it appears to be apart of the parent document | HTML5 only |
src | URL of the page to embed | HTML 4.01, HTML5 |
srcdoc | HTML content of the page to embed (not URL) | HTML5 only |
width | Width of the frame In HTML 4.01, width can be in pixels In HTML5, width can be in either pixels or as a percentage |
HTML 4.01, HTML5 |
Note
- The HTML <iframe> element is found within the <body> tag.
- From the inside of a frame, a script can reference the parent window using window.parent.
Browser Compatibility
The <iframe> tag has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Safari (WebKit)
Example
We will discuss the <iframe> tag below, exploring examples of how to use the <iframe> tag in HTML5, HTML 4.01 Transitional, and XHTML 1.0 Transitional.
Advertisements