5 Demos to Learn HTML iframe

5 Demos to Learn HTML iframe

HTML iframes

The HTML iframe tag is used to embed or include another document within the current web page.

This is quite useful, especially if you want to integrate a web page from another website. You can include a web page from the current domain as well.

How to use the iframe tag?

This is how you may create an iframe in your website:

<iframe src=”web page address”></iframe>

An iframe example
iframe with height and width example

Where src specifies the other page to be embedded. Many popular browsers support the iframes while a few do not. In case a browser does not support the iframe, you may give some text message to the users before the closing tag </iframe> like this:

<iframe src=”web page address”>Your browser does not support iframe</iframe>

Note: A few of the iframe attributes are not supported in HTML5, as mentioned below.

Examples of using the iframes

Following are a few examples of using the iframes in HTML documents. Examples with different iframe attributes like border, height, width, scrolling etc. are also included with the iframe code.

A basic iframe example

The example simply includes a document by using the iframe HTML tag.

HTML iframe

Experience this online

An iframe height and width example

The following example shows how to use the height and width attributes of the HTML iframe to define the iframe size for the embedded document. The height and width are specified in the pixels from the HTML 5 version. In the earlier versions, you could define it in the % as well.

Experience this online

You can set auto height by using the JavaScript in the head tag for iframes.

The iframe border example

You can specify the iframe border by using the frameborder attribute in the iframe tag. It has two values; 0 means no border and 1 for having the border for the iframe.

Note that, the frameborder attribute is deprecated in HTML 5. You can use seamless property that results in an iframe without the borders and scrollbars. However, the seamless property is not supported in all major browsers as of today.

The example below uses the frameborder attribute for an iframe with no border.

Experience this online

iframe scrolling example

The scrolling attribute of the iframe specifies whether to scroll the document inside the iframe if required. By default, the value is set to “auto”, that means the scrollbars will appear if embedded document is larger than the iframe size. You can set the scrolling value to “yes” or “no” to make scrollbars appear or not.

Note, HTML 5 does not support scrolling attribute of the iframe.

Following example shows how to use the scrolling attribute:

Experience this online

Instead, you should use CSS to specify the scrolling. Read the section below to learn how to use CSS with iframe.

iframe with CSS example

You can use CSS properties as an alternative for iframe attributes. The example below sets the iframe properties in the CSS. The border of the iframe is set by using the border property, scroll with overflow. The Height and width are also set by using the CSS in the iframe class.

HTML iframe style

Experience this online