The <iframe> Tag in HTML 5
The <iframe> tag defines an inline frame that loads content from another HTML document and displays it as part of the current page. It is one of the embedded content tags in HTML. An iframe works almost like an image created with the img element, except that the content in the external resource is HTML code rather than binary image data.
Some possible uses of inline frames are:
- to embed content from another site, such as in the YouTube embed example below
- for an area that is common to multiple web pages, such as a footer, as described below
Using an <iframe> to embed a YouTube video
Note: For the following example to work in HTML 5 without Flash, you must "Join the HTML5 Trial" at http://www.YouTube.com/html5.
This is an actual working example of the Embedded YouTube Video example code below.
Using an <iframe> for a common footer
One use of the <iframe> tag is for common elements that appear on multiple pages of a web site. For example, this can be used to include a common footer, which can be accomplished by following these instructions:
- Create an XSL style sheet with a template for the footer.
- Include an <iframe> tag in the footer template.
- Reference the XSL style sheet with an xml-stylesheet instruction in every web page where the footer is to appear.
Although the footer HTML code could be included inline in the style sheet without the <iframe> tag, loading the footer from a separate document allows the footer to be cached by browsers separately from the site templates. A footer in a separate document can also be used on pages without the template simply by adding the <iframe> tag to those documents.
How to change the web page footer(s) depends on whether the whole footer or just part of it needs to be changed:
- To change which footer is used, change the value of the
src
attribute in the <iframe> tag in the template. - To change the content of the footer, edit the HTML document that the
src
attribute of the <iframe> tag references.
More advanced web site templates can be created where different sets of pages use different style sheets, and those style sheets can include another set of higher-level templates that apply to all pages across the entire web site.