Using inline frames is an easy way to provide external content in the body of your page. Here is more information on how to use the iframe tag and what iframe properties you can choose from.
Introduction to iFrames
An iframe can be a convenient way of including external content inside of a page. It works similar to the traditional frameset tag with one major difference. In the case of an inline frame (iframe), you can include this extra content directly within the body of your page.
The external content that you are calling shows up as a container set to the size that you determine anywhere you insert the iframe html code. The iframe element cannot be resized by the end user, so be sure that you set your height, width, and scrolling attributes to allow for a good user experience.
It is helpful to know that search engines and some older browsers cannot “see” the iframe content, so you should be sure to provide an alternative description of the content you are including between the iframe tags. Browsers that do not support the iframe tag will render this instead and search engine spiders are able to index this content.
Basic iFrame HTML Code
A basic iframe html call looks like this:
Here’s what each part means:
SRC - The URL of the page that you are including in the iframe.
HEIGHT - The height of the iframe. This can be expressed in pixels or percentages.
WIDTH - The width of the iframe. This can be expressed in pixels or percentages.
NAME - The name of the iframe.
Optional iFrame Properties
If you want more control over the look and behavior of your iframe, you can choose to add the following iframe properties to the code.
-
SCROLLING - Should the iframe content scroll? Possible values are “yes”, “no”, or “auto”.
Advertisement -
FRAMEBORDER - Would you like a border around the iframe? Possible values are “yes” or"no".
-
ALIGN - How should the iframe be positioned in relation to surrounding content? Possible values are “left”, “right”,“top”, “middle” or “bottom”. - Note: This setting is depreciated in favor of styles
Advertisement -
MARGINWIDTH - The horizontal internal margin for the iframe. Must be expressed as pixels.
-
MARGINHEIGHT - The vertical internal margin for the iframe. Must be expressed as pixels.
Advertisement -
HSPACE - The horizontal spacing around the iframe. Must be expressed as pixels.
-
VSPACE - The vertical spacing around the iframe. Must be expressed as pixels.
Advertisement -
LONGDESC - The URL of the page with a long description of the iframe contents. Must be expressed as a URL.
Here is an example of an inline frame with many of the optional iframe properties set:
