HTML iframe: Including Inline Frames in a Web Page

What is an iframe?

The iframe element was introduced in HTML5, after deprecating <frame>. You should use it to to display a webpage inside another webpage:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" width="90%" height="300px"></iframe>

By default, every HTML iframe is displayed with a border around it. However, you can change its size, style, and color or remove the border completely using the CSS border property:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" style="border: none;"></iframe>

Syntax for an Inline Frame in HTML

To include an iframe in your page, you need to use <iframe> tags:

<iframe src="page_URL"></iframe>

Just like in a hyperlink, the URL of the page you are going to include must be defined in the src attribute. This attribute must be included to the iframe code for it to work as intended.

Attributes for HTML iframe

The src attribute specifies the URL (web address) of the page iframe will embed. It can also reference an HTML document:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm">This text is shown if iframe is not supported.</iframe>

The width attribute sets the width of the HTML iframe while height sets the height. By default, these values are set in pixels, but they can also be set in percent if you use the percent symbol:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" width="90%" height="300px"></iframe>

The optional name attribute sets a name for the iframe element:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" name="iframe_tutorial"></iframe>

The optional sandbox attribute enables an extra set of restrictions for the HTML iframe's content, meaning that it will disallow automatically playing videos and prevent the content from using plugins:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" sandbox></iframe>

HTML iframe: Useful Tips

• Good examples of using an iframe could be to embed a code snippet, multimedia object (like a video) or an applet from a third party.
• You can nest a <p> element within the <iframe> tags to provide a text to display if a browser does not support iframes.