The Web Design Group

iframe - Inline Frame

Syntax <iframe>...</iframe>
Attribute Specifications
  • src=URI (URI of frame content)
  • name=CDATA (name of frame)
  • longdesc=URI (link to long description)
  • width=Length (frame width)
  • height=Length (frame height)
  • align=[ "top" | "middle" | "bottom" | "left" | "right" ] (frame alignment)
  • frameborder=[ "1" | "0" ] (frame border)
  • marginwidth=Pixels (margin width)
  • marginheight=Pixels (margin height)
  • scrolling=[ "yes" | "no" | "auto" ] (ability to scroll)
  • core attributes
Contents Inline elements, block-level elements
Contained in Block-level elements, inline elements except button

The iframe element defines an inline frame for the inclusion of external objects including other XHTML documents. iframe provides a subset of the functionality of object; the only advantage to iframe is that an inline frame can act as a target for other links. object is more widely supported than iframe, and, unlike iframe, object is included in XHTML 1.0 Strict.

iframe's src attribute provides the location of the frame content--typically an HTML document. The optional name attribute specifies the name of the inline frame, allowing links to target the frame.

The content of the iframe element is used as an alternative for browsers that are not configured to show or do not support inline frames. The content may consist of inline or block-level elements, though any block-level elements must be allowed inside the containing element of iframe. For example, an iframe within an h1 cannot contain an h2, but an iframe within a div can contain any block-level elements.

The longdesc attribute gives the URI of a long description of the frame's contents. This is particularly useful for full descriptions of embedded objects. Note that longdesc describes the frame content while the content of the iframe element acts as a replacement when the external resource cannot be inlined.

An example follows:

<iframe src="recipe.html" title="The Famous Recipe">
<!-- Alternate content for non-supporting browsers -->
<h2>The Famous Recipe</h2>

The width and height attributes specify the dimensions of the inline frame in pixels or as a percentage of the available space. The frameborder attribute specifies whether or not a border should be drawn. The default value of 1 results in a border while a value of 0 suppresses the border. Style sheets allow greater flexibility in suggesting the border presentation.

The align attribute specifies the alignment of the inline frame. The values top, middle, and bottom specify the frame's position with respect to surrounding content on its left and right.

align="middle" aligns the center of the frame with the current baseline. To center the frame horizontally on the page, place the frame in a centered block, e.g.,

<p align="center"><iframe src="foo.html" width="300" height="100"></iframe>...</p>

The other align values, left and right, specify a floating frame; the frame is placed at the left or right margin and content flows around it. To place content below the frame, use <br clear="left"|"right"|"all"> or the CSS clear property on the next element as appropriate.

The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning inline frames.

The marginwidth and marginheight attributes define the number of pixels to use as the left/right margins and top/bottom margins, respectively, within the inline frame. The value must be greater than one pixel.

The scrolling attribute specifies whether scrollbars are provided for the inline frame. The default value, auto, generates scrollbars only when necessary. The value yes gives scrollbars at all times, and the value no suppresses scrollbars--even when they are needed to see all the content. The value no should never be used.

More Information