HTML iFrames

In HTML, iframes defines an inline frame. An inline frame enables you present another HTML document within the same window.

The W3C refers to an iframe as a nested browsing context. In other words, you can browse an HTML document that is nested inside another. Typically the iframe takes up a small portion of the document, but you could make it any size you like.

Inline frames are often used in advertising. Many advertisers and advertising networks use iframes to display their ad within a publisher's website. Benefits of using iframes for advertising include more control for the advertiser over how the ad is displayed, as well as enhanced performance monitoring.

Creating an iframe

To create an iframe, use the <iframe> tag. The src attribute provides the URL of the external document to use within the iframe. The seamless attribute determines that it should blend seamlessly into the containing document, so that it actually appears to be part of the containing document.

Also, you can set the width and height using the width and height attributes.

Here's an example:

<iframe src="/html/tags/html_iframe_tag_example.cfm" width="150" height="150" seamless></iframe>

Try it with the Online Editor

As you can see, it's only one line of code, but it could display a complex web page with hundreds (or even thousands) of lines of code if it needed to.

There are a few other attributes that you can use with inline frames. See the <iframe> element for more details.

HTML Frames

Before we leave the subject of iframes, let's talk about frames (as opposed to iframes).

HTML frames allow you to split the whole window up into different frames. For example, you can have a frame to display your left menu, another frame to display the top menu, and another frame to display the main content area. With frames, your HTML document can be made up of many different pages.

HTML frames were once popular on the web, however, their usage has dwindled over the years. This is mainly due to the various usability issues that they can cause, issues with search engine optimization, as well as the fact that frames are being discontinued (as of HTML5).

Having said that, there are many valid arguments for using frames within some contexts. If you're interested, check out these HTML5 compliant frames templates that use CSS to provide frames-based functionality, while escaping most of the usability issues inherent in the traditional frames based websites.