HTML iFrames

Tuesday, February 21, 2012

An iframe, or inline frame, can be used to display the contents of one web page within another. While it may seem that the <iframe> element is identical to the <frame> element, they are not. Iframes can create a frame that sits in the middle of a regular non-framed web page. An iframe element works just like other HTML elements such as a <div> or <img>. Modern browsers support iframes. However, older browsers may not, so use iframes carefully. Here is an example of the syntax used to add an <iframe> element within a web page.

<iframe src="somepage.htm" ></iframe>

You can also add additional attributes to the starting iframe tag such as:

  • src: URL of the document to go in the frame
  • height: height of the iframe
  • width: width of the iframe
  • name: (deprecated) name of iframe
  • id: use id instead of name. Useful so that you can target it with links
  • longdesc: URL of a long description of the contents of the iframe
  • frameborder: if the iframe should have a border around it
  • marginwidth: internal left/right margin for the iframe
  • marginheight: internal top/bottom margin for the iframe
  • scrolling: if the iframe should have scroll bars (yes/no)
  • align: (deprecated) alignment of the iframe object to text around it
  • vspace: space above and below the iframe
  • hspace: space to the left and right of the iframe

If you want to display text in place of the iframe for browsers that do not support it, add text between the starting and ending <iframe> tags.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS: The Complete Reference HTML CSS and JavaScript Editor