iframe tag

We thoroughly explain the HTML IFRAME tag and all its attributes, with some usage examples.

The frames (frame in English means frame) are tools that have had a long history in the development of web pages with HTML. From being a non-standard tag it has become supported by all browsers and part of the HTML specifications, only to be withdrawn from the standard again in HTML5. However, an IFRAME sister tag that we are going to see in this article, which is still very useful today, has remained in use and within the standard.

Specifically, iframe is used to create a space within the page where another website can be embedded. It is a square whose dimensions must be specified by the developer on the page itself, included by the width and height attributes in the IFRAME tag itself.

The iframe has a web page associated with it, which is loaded in the space and will operate completely independently. That web page will have its own content and styles. It will also be perfectly functional: if it has links, they will be displayed in the same space and if it has scripts or applications inside, they will also run autonomously in the space reserved for the iframe.

Note: If you are looking for information about traditional frames, at .com we have already talked a lot about them and although they are no longer within the current HTML standard, browsers still interpret them, for compatibility with old pages. You can start reading in the article.

In this article we are going to talk about the “sister” tag, which is much more used today, because it is more useful and less problematic than the frames themselves. IFRAME was a tag introduced in the HTML 4.0 specifications.

Where the IFRAME is useful

Iframe is used in many contexts. Within an iframe we can show content from other pages, as if they were on ours, so they are useful for examples such as:

• Banner codes, which are invoked via an iframe requesting banner data, usually from a banner server that may be on another network.
• View third-party content, such as news blocks or news offered on other websites.
• User interfaces, in which certain activities are carried out autonomously and the processing is on another web page.

Using iframe vs. frame

Currently the iframe tag is used more often than the frame tag, because it doesn’t give as many problems as this. The main difference is based on the fact that the iframe tag does not need a declaration of the spaces of the frames or frameset, because it is embedded in the HTML code of the page. The iframe, therefore, does not cause navigation problems, like those that occur with normal frames if you do not enter correctly through the frameset.

Also, since there is no frameset in iframes, it does not suffer from the problems of using frames, especially when the page is indexed by search engines.

To put it in some way, working with iframes or floating frames is as simple as making a table, which is coded within the HTML layout, with its space reserved within the page. Thus, the only difference with respect to a table is that the content of the iframe is extracted from another web page.

Construction of the iframe tag

As we said, the iframe is placed directly in the HTML code, in the place where we want it to appear.

It would be placed with code like this:

As can be seen, the main attributes of the iframe are the web page that is going to be displayed in the space and the width and height of the box that we reserve for the floating frame.

As you can see, the iframe tag has a corresponding closing tag. All the text that we place between the start tag and the end tag is alternative text, which will only be displayed in case the visitor’s browser does not accept the iframe tag.

All iframe attributes

Now we are going to see what would be the attributes available for the iframe tag. However, it should be noted that some of the attributes that we are going to see are included more in the field of styles and therefore could, and would be more correct, be specified within the CSS.

src: To indicate the web page that will be displayed in the space of the floating frame.

width: To define the width of the iframe box

height: To define the height of the iframe

name: To specify the name of the frame, which we can use later to refer to it with the target of the links, or through javascript.

id: To indicate the identifier of the iframe, and to be able to refer to it from javascript.

frameborder: to define whether or not we want there to be a border in the frame. Possible values ​​are 0 | 1. frameborder=0 would indicate that we don’t want a border and frameborder=1 that we do.

scrolling: indicates if you want scroll bars to appear to see the contents of the complete iframe, if they do not appear in the space reserved for the iframe. Possible values ​​are: yes | not | auto. The value “yes” is for the scroll bars to always appear, “no” is for them to never appear and “auto” is for them to appear only when necessary (it is the default value).

marginwidth: To define the margin to the left and right that the page that goes inside the iframe must have, with respect to the border. This margin is in pixels, but the margin that may be assigned to the web page that we display in the floating frame will prevail.

marginheight: the same as marginwidth, but in this case for the size of the margin at the top and bottom.

margin: to specify frame alignment, same as specified for images.

style and class: the attributes to define the look of the iframe via css style sheets.

To finish, here is another example of an iframe with a few more attributes: