IFRAME - Inline Frames
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
example HTML link to address an inline frame ...
<a href="dothings.htm" target="yourName">HTML 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 ...
select/copy the link Markup ...