Iframes - Basic Information

The following demonstrates an iframe with basic attribute settings:

<iframe id="ifrm" src="demo.html">
 [Content for browsers that don't support iframes goes here.]
</iframe>

The iframe's src attribute specifies the URL of the document to be displayed in the iframe.

Appearance of the iframe could be controlled using attributes such as frameborder, scrolling, width and height, but for better cross-browser consistency and HTML5 conformance, this example will use CSS instead:

iframe#ifrm {
    border:1px solid #ccc;
    width:80%; height:120px;
    }

This is how the iframe displays:

The document loaded into the iframe does not inherit styles such as font, colors or background from the containing document.[1] Styles to be applied to iframe content need to be included in that document in the usual ways, i.e., linked, embedded, etc.

Example Source Code

You can use your browser's menu commands to view the source code of this document. You can right-click on an iframe to access the source code of the document contained inside it. This tutorial's examples are available for download in a zipped file.

More Information

W3 Schools has information on the iframe tag, listing all the attributes and their possible values, for both HTML4 and HTML5.

See an example demonstrating loading new documents into the iframe.

Back to Iframes Tutorial.