An iframe is used to display a web page within a web page.
Frame Description
Frames allow a visual HTML Browser window to be split into segments, each of which can show a different document. This can lower bandwidth use, as repeating parts of a layout can be used in one frame, while variable content is displayed in another.
This may come at a certain usability cost, especially in non-visual user agents, due to separate and independent documents (or websites) being displayed adjacent to each other and being allowed to interact with the same parent window.
Because of this cost, frames (excluding the iframe element) are only allowed in HTML 4.01 Frame-set.
Iframes can also hold documents on different servers. In this case the interaction between windows is blocked by the browser.
Iframe Syntax
The syntax for adding an iframe is:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the iframe page.
Iframe - Set Height and Width
Use the height and width attributes to specify the size.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Iframe - Remove the Border
By default, an iframe has a black border around it.
To remove the border, add the style attribute and use the CSS border property:
With CSS, you can also change the size, style and color of the iframe's border:
Use iframe as a Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3ii.com" target="iframe_a">w3ii.com</a></p>
Try it Yourself »HTML iframe Tag
| Tag | Description |
|---|---|
| <iframe> | Defines an inline frame |
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »