Custom Search
| Syntax | This element uses separate opening and closing tags.<iframe>...</iframe> |
|---|---|
| Usage | The <iframe> tag can be used to create an inline frame or subwindow within a web page. This allows a web page to be displayed inside of the current web page. If the browser does not support iframes then the content between the opening and closing <iframe> tags is displayed. HTML & XHTML <iframe> example using the src, width, and height attributes. <p>Below is an iframe.</p> <iframe src="../html/div_tag/" width="400" height="150"> <p>iframes are not supported by your browser.</p> </iframe>   |
| Content Model | The <iframe> element can contain the following tags, and Text, between its opening and closing tags. <a>
<abbr>
<acronym>
<address>
<applet>
<b>
<basefont>
<bdo>
<big>
<blockquote>
<br>
<button>
<center>
<cite>
<code>
<del>
<dfn>
<dir>
<div>
<dl>
<em>
<fieldset>
<font>
<form>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<hr>
<i>
<iframe>
<img>
<input>
<ins>
<isindex>
<kbd>
<label>
<map>
<menu>
<noframes>1
<noscript>
<object>
<ol>
<p>
<pre>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<sub>
<sup>
<table>
<textarea>
<tt>
<u>
<ul>
<var>
Notes:1. The <iframe> element can contain the <noframes> tag when using DTD Transitional documents but not Frameset documents. 2. Red tags have been deprecated and are allowed in DTD Transitional and Frameset documents but not Strict documents. |
| Video Tutorial |
This video demonstrates how to use the HTML / XHTML iframe tag. It will cover the basic usage for the iframe tag and demonstrate the scr, width, height, scrolling, name, and id attributes. This video will also show how to change the contents of the iframe tag using an anchor tag with its target attribute. |
| Required | Tag Specific | Core | Focus | Events | Language |
|---|---|---|---|---|---|
| align frameborder height longdesc marginheight marginwidth name1 scrolling src width | id class style title | ||||
| Notes: 1. deprecated in XHTML. | |||||
| Attribute | Description |
|---|---|
| align | The align attribute specifies the position of the iframe. A value of "bottom", "middle", or "top" specifies the position with respect to surrounding text. a value of "left" or "right" will float the iframe to the left or right. HTML & XHTML <iframe> example using the align attribute. <p>First line of text.</p>
<iframe src="../html/div_tag/" width="400" height="150" align="middle">
<p>iframes are not supported by your browser.</p>
</iframe>
<p>Second line of text.</p>Note: This attribute has been deprecated. |
| frameborder | The frameborder attribute specifies whether or not a border should be drawn around the iframe. Possible values are "1" or "0": "1" = border should be drawn. "0" = border should not be drawn. The default value is "1". HTML <iframe> example using the frameborder attribute. <p>Below is an iframe.</p>
<iframe src="../html/div_tag/" width="400" height="150" frameborder="0">
<p>iframes are not supported by your browser.</p>XHTML <iframe> example using the frameborder attribute. <p>Below is an iframe.</p>
<iframe src="../html/div_tag/" width="400" height="150" frameborder="0">
<p>iframes are not supported by your browser.</p>
</iframe> |
| height | The height attribute is used to specify the height of the iframe. The value is in pixels, or percentage when followed by a percent sign (%). If the value is specified as a percentage, it refers to a percentage of the available space. HTML & XHTML <iframe> example using the src, width, and height attributes. <p>Below is an iframe.</p>
<iframe src="../html/div_tag/" width="400" height="150">
<p>iframes are not supported by your browser.</p>
</iframe> |
| longdesc | The longdesc attribute is used to specify the URL of a long description of the iframe. <iframe> tag example using the longdesc attribute. <iframe src="../html/span_tag.html" longdesc="../html/frame_info.html"> |
| marginheight | The marginheight attribute is used to specify the size of the margin, in pixels, between the iframe content and the top and bottom of the iframe. HTML & XHTML <iframe> example using the marginheight attribute. <iframe src="text.html" marginheight="5" width="300" height="300"> <p>iframes are not supported by your browser.</p> </iframe> <iframe src="text.html" marginheight="100" width="300" height="300"> <p>iframes are not supported by your browser.</p> </iframe> |
| marginwidth | The marginwidth attribute is used to specify the size of the margin, in pixels, between the iframe content and the left and right sides of the iframe. HTML & XHTML <iframe> example using the marginwidth attribute. <iframe src="text.html" marginwidth="5" width="300" height="300"> <p>iframes are not supported by your browser.</p> </iframe> <iframe src="text.html" marginwidth="100" width="300" height="300"> <p>iframes are not supported by your browser.</p> </iframe> |
| name | The name attribute is used to assign a name to the iframe. This iframe can be specified as the target for links by using its name. The name attribute has been deprecated in XHTML but not HTML. For XHTML, the id attribute can be used instead. To increase forward and backward compatibility, both the name and id attributes can be set to the same value. HTML & XHTML <iframe> example using the name attribute. <iframe src="frame_name.html" width="300" height="300">
<p>iframes are not supported by your browser.</p>
</iframe>
<iframe src="text.html" name="two" id="two" width="300" height="300">
<p>iframes are not supported by your browser.</p>
</iframe>Note: deprecated in XHTML. |
| scrolling | The scrolling attribute is used to specify whether or not scrolling mechanisms (typically scroll bars) are provided for the iframe. Possible values are "auto", "no", or "yes": "auto" = scrolling mechanisms provided when necessary. "no" = do not provide scrolling mechanisms. "yes" = provide scrolling mechanisms. The default value is "auto". HTML & XHTML <iframe> example using the scrolling attribute. <iframe src="text.html" scrolling="yes" width="300" height="300"> <p>iframes are not supported by your browser.</p> </iframe> <iframe src="../html/div_tag/" scrolling="no" width="300" height="300"> <p>iframes are not supported by your browser.</p> </iframe> |
| src | The src attribute specifies the URL of the web page that will be displayed in the iframe. HTML & XHTML <iframe> example using the src, width, and height attributes. <p>Below is an iframe.</p>
<iframe src="../html/div_tag/" width="400" height="150">
<p>iframes are not supported by your browser.</p>
</iframe> |
| width | The width attribute is used to specify the width of the iframe. The value is in pixels, or percentage when followed by a percent sign (%). If the value is specified as a percentage, it refers to a percentage of the available space. HTML & XHTML <iframe> example using the src, width, and height attributes. <p>Below is an iframe.</p>
<iframe src="../html/div_tag/" width="400" height="150">
<p>iframes are not supported by your browser.</p>
</iframe> |
| id | The id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag. See id Example |
| class | The class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example |
| style | The style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example |
| title | The title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example |
| <iframe> example using the src, width, and height attributes.<iframe> example using the align attribute.<iframe> example using the frameborder attribute.<iframe> example using the marginheight attribute.<iframe> example using the marginwidth attribute.<iframe> example using the name attribute.<iframe> example using the scrolling attribute. |
