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 HTML documents. IFRAME provides similar functionality to OBJECT. One advantage of IFRAME is that it can act as a target for other links. However, OBJECT is included in HTML 4 Strict while IFRAME is not.

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>
<H3>Ingredients</H3>
...
</IFRAME>

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 vertical 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> 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 a non-negative integer.

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.

More Information