Home arrow HTML arrow The Ins and Outs of Iframes

The Ins and Outs of Iframes

The term "iframes" is short for "inline frames." Maybe you have never heard of iframes, or maybe you have avoided them because the name incorporates the "F" word, i.e. "frames," which are said to do bad things like confuse search engines. If so, this article will introduce you to a very useful and versatile web design tool that you have been missing out on. If you have already used iframes, but for only basic things, this article will show you some powerful new uses, such as remote scripting.

Author Info:
By: John Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
December 15, 2008
  1. · The Ins and Outs of Iframes
  2. · iframes Questions and Answers
  3. · Uses of iframes
  4. · iframe Uses continued

print this article

The Ins and Outs of Iframes
(Page 1 of 4 )


Only basic HTML is required for this two-part article. Some knowledge of PHP and JavaScript would be helpful in understanding the more sophisticated uses of iframes that are explained, particularly in the second part, but is probably not indispensable.

What are iframes?

The concept is simple: an iframe is like window that you can place anywhere on your web page, through which you can see another web page. In other words, iframes allow you to embed another web page within your web page.

An iframe is created by the HTML tag <iframe>. This tag has a required src attribute to tell the frame which URL to load, and several optional attributes, some of which we will mention as we go along. It uses a closing tag, </iframe>. A message which will only display if iframes are not supported can be placed in between the opening and closing tags like so:

<iframe src="path/mydocument.htm">This Browser Does Not Support iframes</iframe>

The iframe concept, and the iframe tag seem pretty simple, and they are, but the implications of the ability of an iframe to embed another URL are profound. For example, content on a remote web page displayed in the iframe, whether static or dynamically generated, can be made to appear as if it is part of your web page. We will learn more about this, and more, in this two part series.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials