11.6 Inline Frames

11.6 Inline Frames

To this point, our discussion has centered around frames that are defined as part of a frameset. A frameset, in turn, replaces the conventional <body> of a document and supplies content to the user via its contained frames.

The HTML 4 and XHTML standards let you do things a bit differently: you can also define a frame that exists within a conventional document, displayed as part of that document's text flow. These frames behave a lot like inline images, which is why they are known as inline frames.

Internet Explorer Versions 4 and later and Netscape Version 6 support inline frames.

11.6.1 The <iframe> Tag

Define an inline frame with the <iframe> tag. The <iframe> tag is not used within a <frameset> tag. Instead, it appears anywhere in your document that an <img> tag might appear. The <iframe> tag defines a rectangular region within the document in which the browser displays a separate document, including scrollbars and borders.

Use the src attribute with <iframe> to specify the URL of the document that occupies the inline frame. All of the other, optional attributes for the <iframe> tag, including name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, and title, behave exactly like the corresponding attributes for the <frame> tag. [Section 11.4.1]

Use the content of the <iframe> tag to provide information to users of browsers that do not support inline frames. Compliant browsers ignore these contents, whereas all other browsers ignore the <iframe> tag and therefore display its contents as though they were regular body content. For instance, use the <iframe> content to explain to users what they are missing:

...other document content...
<iframe src="sidebar.html" width=75 height=200 align=right>
Your browser does not support inline frames. To view this
<a href="sidebar.html">document</a> correctly, you'll need 
a copy of Internet Explorer or the latest Netscape Navigator.
</iframe>
...subsequent document content...

In this example, we let the user know that she was accessing an unsupported feature and provided a link to the missing content.

11.6.1.1 The align attribute

Like the align attribute for the <table> tag, this inline frame attribute lets you control where the frame gets placed in line with the adjacent text or moved to the edge of the document, allowing text to flow around the frame.

For inline alignment, use top, middle, or bottom as the value of this attribute. The frame is aligned with the top, middle, or bottom of the adjacent text, respectively. To allow text to flow around the inline frame, use the left or right values for this attribute. The frame is moved to the left or right edge of the text flow, respectively, and the remaining content of the document is flowed around the frame. A value of center places the inline frame in the middle of the display, with text flowing above and below.

11.6.1.2 The height and width attributes

Internet Explorer and Netscape 6 put the contents of an inline frame into a predefined, 150-pixel-tall, 300-pixel-wide box. Use the height and width attributes with values as the number of pixels to change those dimensions.

11.6.2 Using Inline Frames

Although you'll probably shy away from them for most of your web pages (at least until most browsers become fully standards-compliant), inline frames can be useful, particulary for providing information related to the current document being viewed, similar to the sidebar articles you find in a conventional printed publication.

Except for their location within conventional document content, inline frames are treated exactly like regular frames. You can load other documents into the inline frame using its name (see the next section) and link to other documents from within the inline frame.