Using The HTML Tag To Create Inline Frames: Here's How

In HTML Tags

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Element of
HTML Frames Are Obsolete In HTML5: Here's How To Make Them Responsive
What does Using The HTML Tag To Create Inline Frames: Here's How do?
The <iframe> creates an inline frame, which embeds an independent HTML document into the current document.
Display
block

Contents

  • 1 Code Example
  • 2 Powerful, but easy to misuse
    • 2.1 How <iframe> and <frame> are similar, and how they are different
  • 3 Do not recreate frame-based layouts with iframe
  • 4 Good (and terrible) uses for <iframe>
  • 5 Browser Support for iframe
  • 6 Attributes of iframe

Code Example 

                  <iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>

Powerful, but easy to misuse

Back in the bad old days of website design, there were a lot of <frame> elements hanging around, ruining everyone's day. They were almost always a bad approach to design. Thankfully, the <frame> element has been deprecated in HTML5, but the <iframe>, or "inline frame" is still available. Should it have been deprecated too? Is it best to just avoid it? There are some valid uses for this element, but you really need to understand what it is and how it works in order to avoid some of the pitfalls that were so common in the dark times.

How <iframe> and <frame> are similar, and how they are different

Both elements represent an independant HTML document. They content for the document is referenced in the src attribute of each element, so it is actually a fully independent resource being referenced from the current document.

                    <!-- You can do this --> <iframe src="https://example.com"></iframe>   <!-- But you CANNOT do this --> <iframe>  <!DOCTYPE html>  <html>   <head>   .   .   .   </head>   <body>   .   .   .   </body>  </html> </iframe>

The main difference between <iframe> and <frame> is that <iframe> implements this in a way that makes sense, that respects what an HTML document is in the first place. The contents of the <iframe> are displayed inside an element which is clearly a part of the current document. For example, consider this embedded YouTube video:

                    <iframe width="560" height="315" src="https://www.youtube.com/embed/M2kSJbLbIgQ" frameborder="0" allowfullscreen></iframe>

The video is clearly on the page, not in some separate panel somewhere else. The <frame> element broke this paradigm and allowed the document to exert control over the browser window, breaking it into several smaller panels (frames), which each displayed a different document. (It was terrible.) All of the other differences between <frames> and <iframes> stem from this basic difference.

Do not recreate frame-based layouts with iframe

You may find yourself tasked with updating or redesigning an old website that was built using frames. And then you might find yourself tempted to use <iframes> and fixed-width design to recreate the same nightmare of independent panels and sub-windows. Then you'll discover that you can't use the target attribute to open a link in a particular frame. That should stop you, but then you might start looking for JavaScript solutions, and then you'll rebuild something terrible. Please don't do this.

Good (and terrible) uses for <iframe>

There are some legitimate uses for <iframe>, and mimicking terrible design patterns from the 1990s is not one of them. Here are a few:

  • embedding third-party media
  • embedding your own media in a document-agnostic way
  • embedding code examples (we do it on this site)
  • embedding third party "applets" like payment forms

And here are some terrible uses for <iframe>

  • photo gallery
  • forum or chan

Basically — if you need to embed some independant, already-existing HTML document into the current document, use an <iframe>. If you are building all of it from scratch together, there is almost no good reason to break a page design into several independent documents, especially if they _aren't actually independent pieces of content.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for iframe