How to Create iframes in HTML? iframe HTML Code
An iframe also called an inline frame is an HTML element that is used to display external content including other web pages 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.
We’ll show you how to Create Iframes Using HTML with complete source code available for you so you just copy and paste it into your project.
<iframe> in HTML
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 create 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.
50+ HTML, CSS & JavaScript Projects With Source Code
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.
Thank You For Visiting!!!
written by Ankit Joshi
