iframe element in HTML

<iframe> is used to add a separate HTML document inside HTML document. In simple terms, <iframe> adds another HTML page into HTML page.
When you add <iframe> into HTML document, you are creating a whole new separate document context for that <iframe>. So it will be allocated memory required by <iframe> referenced page. You can add as many <iframe> into HTML page but it will require memory. So be careful and use only when needed.
Let us have a look at an example.

This document has an iframe.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>This document has an iframe.</p>
        <iframe src="./basictags.php" width="300" height="300">
            Your browser doesn't support iframe.
        </iframe>
    </body>
</html>
                        

In above example, we have added an <iframe> which adds the document of "basictags.php".
In above code, <iframe> will add the same amount of memory the memory needed for "basictags.php" page.

Attributes

Attribute Description
src any URL which will be loaded in <iframe>. It can be a relative path to the page just like above example or an URL like "https://www.learnperday.com".
width specifies the width of iframe in pixels. Before HTML5, width can be specified in pixels or percentage. Now in HTML5, percentage is not allowed.
height specifies the height of iframe in pixels. Before HTML5, height can be specified in pixels or percentage. Now in HTML5, percentage is not allowed.
allowfullscreen if this attribute is set to true, then <iframe> can be set to full screen modeby calling requestFullscreen() method.

In above table, we have covered only attributes that are more useful while using <iframe>.

Deprecated Attributes

There are many attributes which were used before HTML5 and now deprecated. They may be supported by the browser now but should not be used.

Attribute Description
align Allignment of <iframe> with respect to surrounding elements.
frameborder Draws the border around <iframe>. User css border property instead.
marginheight The margin between frame content and its top and bottom margin.
marginwidth The margin between frame content and its left and right margin.
scrolling Indicates to show the scrollbar or not.
  • auto: only when needed
  • yes: always show scrollbar
  • no: Never show scrollbar
longdesc A URI of a long description of the frame. Due to widespread misuse, this is not helpful for non-visual browsers.

Conclusion

In this section, we learned about <iframe> element in HTML.
In next section, we will learn about textbox in HTML.