iframe html | iframe html code explanation - codewithrandom

iframe html | iframe html code explanation - codewithrandom

iframe html | iframe html code explanation - codewithrandom


<iframe> in HTML

An iframe also called an inline frame is an HTML element that is used to display the external content including other webpages within our main webpage. In other words, an iframe works like a mini web browser within a web browser. Furthermore, the content contained within an iframe is totally independent of the items around it.

Before the <iframe> element there used to be a lot of <frame> elements floating around in website design. These frame elements were almost always a poor design approach. The HTML5 deprecated the use of <frame> elements, albeit <iframe> element is still available. In this article, we will introduce the <iframe> tag and discuss where it is used.


iframe html code

<iframe src="URL"></iframe>

The src attribute takes the location of an external object or a web page as its value.


While adding an <iframe> element it is always best to assign a height and width to the iframe window. For example:


<iframe src="index.html" width="400" height="200"></iframe>


Or you can use CSS

<iframe src="index.html" style="width: 400px; height: 200px;"></iframe>



Similarities between <frame> and <iframe> elements

Both <frame> and <iframe> elements creates a standalone HTML document. The document's content is referenced in each element's src property, thus it's a completely independent resource being referenced from the current document.


Difference between <frame> and <iframe> elements


The key difference between <iframe> and <frame> is the way they distribute the mini web window on the page.


The <iframe> tag creates a mini web window in a way that makes sense and respects the nature of an HTML document and browser window. It creates a mini window, such that its content is displayed in an element that is a part of the current document. 


Whereas, the <frame> element disrupts this structure. It allows the document to take control of the browser window by dividing it into multiple smaller panels (frames). Where each frame displays a distinct document. All the other differences between <frames> and <iframes> arise from this fundamental difference.


Best uses of <iframes> html


Here are a few of the best cases, where you should use iframe or inline frame.

  • For embedding third-party media

  • Embedding your own media files while keeping them independent from the document.

  • For embedding code examples

  • To embed third party “applets” like payment forms

  • As a link target for a hyperlink


Here are a few worst uses of iframes:

  • A Photogallery

  • To create a Forum


A good rule of thumb is to only use iframe when you want to embed some independent, pre-existing HTML document into the current document. However, if you are creating all of it from scratch, in that case breaking your page layout into several independent documents is not worth doing. Especially if they are not a real fragment of independent content. 


Browser Support


The iframe element is supported in the following browsers and higher:

  • Google Chrome 93.0

  • Internet Explorer 11.0

  • Firefox 92.0

  • Microsoft Edge 93.0

  • Opera 78.0

  • Safari 14.1


written by Ankit Joshi

Check it more







Post a Comment

Previous Post Next Post