iframes - inline frames - iframe
The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
iframe code
iframe alternatives
iframe target
iframe link
Best viewed at 1024 x 768 using a colour depth greater than 256

IFRAME - Inline Frames

This page meets 'W3c Transitional' guidelines but does not meet WCAG Accessibility Guidelines

Iframes, A Really Neat Idea ...

Inline frames (iframes or floating frames) are a really neat feature of HTML. They work in all modern browsers (v5 onwards) and I personally do not understand why they are not used a lot more because they really are very cool indeed. We use iframes throughout our Photoshop Section to display the large images in that section.

HTML IFRAME Element:  Iframes are widely used to display web content in a separate inline floating frame and they are supported by all modern HTML browsers. However, the IFRAME Element has been depreciated by W3c and this means that web pages that use iframes will not validate to the 'W3c Strict' standard or meet WCAG Accessibility guidelines. However, pages that contain iframes will validate to the 'W3c Transitional' standard and I feel sure that web browsers will continue to support iframes for a long time to come.

Web Accessibility is becoming of increasing concern to many people and my suggestion is that you should only use elements like IFRAMES that do not meet WGAG Accessibility guidelines or validate to 'W3c Strict' standards in situations where there is no other reasonable alternative way to display the content. For example, in the case of iframes you might want to consider the HTML Object element as an alternative although I would be the first to agree that the Object element is not as functional as the Iframe element.

Varied IFRAMES Applications

Continuing with this theme, the problem with frames generally in that 'machine readers' can have difficulty accessing pages within frames and this is not useful in Accessibility terms. For this reason we limit our use of inline frames to only include features that are not directly part of the content of the parent page. Examples include displaying images that cannot be read by machine readers anyway, the type of use we have in our Online Melody Player where we use inline frames to play embedded MIDI files, external text and banner advertising, internal site advertising and promotions that are not part of the content of the page and any other usage that is not directly related to the content of the parent page. There are many ways that you can use inline frames without affecting the Accessibility of the parent page and these many uses are only limited by our inability to think of them until the need arises.

An inline frame behaves in a very similar manner to an ordinary HTML Frame in a Frameset, in that you can load any HTML document (web page) into it. The difference between an inline frame and an ordinary static frame is that the inline frame can be positioned anywhere on a web page and will scroll with the page, just like all the other objects on the page. The IFRAME Tag will accept most of the attributes associated with the FRAME Tag and using standard HTML links, new pages can be loaded into the inline frame from the currently loaded page, the parent page or a page in any other window or frame. You can even load pages that create a new standard FRAMESET into the inline frame.

+++ Step Carefully +++
"One of the secrets of life is to make stepping stones out of stumbling blocks." ~ Jack Penn

The IFRAME Tag

The IFRAME tag is a container tag and it requires both an opening IFRAME tag and a closing IFRAME tag. If a browser does not support the IFRAME element then any HTML content between the opening tag and the closing tag is rendered by the browser. You should remember that the IFRAME element is only supported by modern browsers and it is important that you apply the IFRAME tags so the page will degrade properly in non-supporting browsers. If you do not use alternative content within the iframe tags then your page may not 'work' well in non-supporting browsers and because of this your page could appear disorganized.

Sad Browser

We will use our own page Markup as an example of one way to write a cross-browser page that includes an inline frame. If you are using a browser that supports the IFRAME tag then further up the page you should have seen an inline frame with a scroll bar on the right, that demonstrates the use of three linked HTML pages inside the inline frame (i.e. groceries list, bills to pay and things to do).

If you are using a browser that does not support the IFRAME Tag then you should have seen our alternative 'sad browser' graphic. If your inline frame is not too large and you decide to use an alternative graphic then it is useful to make your alternative graphic exactly the same size as the inline frame and we are displaying our alternative graphic on the left so that you can see what we mean if you are using a browser that supports the IFRAME Tag. Incidentally, Netscape v4+ browsers have an inline layer tag and this ILAYER Tag should not be confused with the IFRAME Tag. The ILAYER Tag is only implemented in Netscape v4 browsers and you would still have to use yet another alternative for browsers that do not support either the IFRAME Tag or the ILAYER Tag.

Continuing on this theme, there is another HTML Tag called the OBJECT Tag which works in a similar manner to the IFRAME Tag and it has the advantage of conforming to the 'W3c Strict' specification. However, the disadvantage of the OBJECT Tag is that you cannot change pages in the OBJECT because it does not support an Href Attribute and you cannot access the page from the parent page in the way you can using the IFRAME Tag because it does not support a Target Attribute. Also, if a user clicks on a link in the OBJECT's child page, to load a new page, then the new page replaces the parent page and not the child page.

The HTML Markup

Both the inline frame and the alternative graphic are 254 pixels wide by 254 pixels high and if you study the example HTML markup below you should be able to see how the IFRAME Tag and the IMG Tag interact in the Markup. Incidentally, you don't have to use an alternative graphic and it is perfectly OK to use a text message or no content at all within the IFRAME Tag, always providing that you are happy that your page 'works' reasonably well in browsers that don't support the IFRAME Tag.

example cross-browser Markup ...

<iframe name="yourName" src="groceries.htm" width="254" height="254">
<img src="sadbrowser1.gif" alt="Sad Browser" width="254" height="254">
</iframe>

The IFRAME Attributes

For the sake of clarity we kept the IFRAME Tag above as simple as possible but there are a number of attributes that you can use to tailor your inline frames. These attributes have their roots in the standard HTML Frame Tag and in the standard HTML IMG Tag, and if you are familiar with the Frame Tag and the IMG Tag attributes then you should recognise these attributes straight away.

SRC

The SRC attribute is used to specify the relative pathname or URL of the HTML document that you want the inline frame to display when the page is first rendered. An example of using a relative URL would be src="dem/iframe/groceries.htm" and an example of using an absolute URL would be src="http://www.microsoft.com". Web servers will return an 'HTTP 404 Not Found' error if they are unable to find the specified document and an inline frame will behave in exactly the same way as any other browser window.

Width

Treat this in exactly the same way that you would treat the width attribute in the IMG Tag. In our example we used width="254" and this figure represents the width in pixels that you want the inline frame to be. If scroll bars are used they would be displayed inside this area, reducing the child page area.

Height

Treat this in exactly the same way that you would treat the height attribute in the IMG Tag. In our example we used height="254" and this figure represents the height in pixels that you want the inline frame to be. If scroll bars are used they would be displayed inside this area, reducing the child page area.

Frameborder

The frameborder attribute turns the border on or off. A value of frameborder="0" turns the border off and a value of frameborder="1" turns the border on. There is only one style of border and that is an inset border that is two pixels wide all the way around the inline frame. The default is the border turned on.

Marginheight

The marginheight attribute sets the number of pixels from the top of the inline frame to the start of the page content. For example, marginheight="16" would give a top margin of 16 pixels in depth. In Microsoft browsers this setting can be over-ridden using the topmargin attribute in the body tag of the HTML document.

Marginwidth

The marginwidth attribute sets the number of pixels from the left and right edges of the inline frame to the left-side start and right-side end of the page content. For example, marginwidth="30" would give a left margin of 30 pixels wide and a right margin of 30 pixels wide. In Microsoft browsers this setting can be over-ridden using the leftmargin attribute in the body tag of the HTML document.

Scrolling

The scrolling attribute is used to set the behavior of the inline frame scrollbars. Setting the attribute to scrolling="yes" would set the vertical and horizontal scrollbars to always being visible. Setting the attribute to scrolling="no" would set the scrollbars to never being visible. Setting the attribute to scrolling="auto" would make the scrollbars visible only if there was page content outside the inline frame display area that a user would need to scroll to see. Vertical and horizontal scrollbars work independently of each other with this setting.

Name

The name Attribute enables you to identify your inline frame so that it can be targeted by HTML or JavaScript links in the parent page or pages in other frames or windows. By default inline frames are unnamed and the syntax of this attribute is very simple and it would take the form name="yourName". You can use HTML links and JavaScript links to target an inline frame and we have provided examples of both below. Both of these links would be located on the same page that contains the inline frame.

example HTML link to address an inline frame ...

<a href="dothings.htm" target="yourName">HTML Link</a>

example JavaScript link (add some CSS to make it look and behave like a link) ...

<div onclick="self.yourName.location.href='dothings.htm';">JavaScript Link</a>
 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - HTML Inline Floating Frames Inline frames (floating frames) are a really neat feature of HTML. They work in all modern browsers and I do not understand why they are not used a lot more because they really are very cool indeed.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Inline Frames Links
 
 
 
 
 
iframe heighr
iframe tutorial
iframe generator
iframe object
in-line frames
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England
 
floating frames