HTML iFrames

You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document.

Iframe Syntax

<iframe src="<URL>"> </iframe>

src attribute specifies the web address (URL) of the inline frame page.

Why HTML Iframe

If we want to imbed multiple web-pages in a single HTML web page then we can be done by implementation of HTML Iframe. HTML Iframe is created by <iframe>

Iframe Example

<iframe src="http://www.gdatamart.com/html/html_images.aspx"> </iframe>
                                         

Output

• Iframes are one the best ways to build up a complex, detailed webpage from smaller, more manageable chunks.
• iframe tags, a developer can include webpages as part of a larger, enompassing parent page.
• Unlike frames, iframes can be styled through CSS and easily molded to fit seamlessly within the parent page.
• One neat use of an iframe is to display a custom Google map within the page.
• This can be done by setting the ‘src’ attribute of the iframe tag to Google Map URL.

iFrame Attributes

According to our requirements we can set several attribute to HTML Iframe in which height, width, frameborder and style attribute are used widely.

Iframe - Set Height and Width Attributes

You can set the width and height of iframe by using "width" and "height" attributes. By default, the attribute's values are specified in pixels but you can also set them in percent & the width of an Iframe element in HTML is 100% of parent Element.

Attributes Example

<iframe src="http://www.gdatamart.com/english-dictionary.aspx" width="100%" height="250"> </iframe>

Output

Iframe - Remove the Border

By default, an iframe has a border around it. To remove the border, add the style attribute and use the CSS border property

If we closely observe Iframe window then we will find that there is a border of 1px surround Iframe dimension. If we want to change the thickness of border then we can define frameborder attribute according to need, if we don’t want any border then we can define frameborder attribute value as 0.

Remove the Border Example

<iframe src=" http://www.gdatamart.com " frameborder="0"  width="100%" height="250" > </iframe>

Output

Style Attribute of Iframe

By using style attribute in Iframe we can set border, border-radius and many more property, let’s see below example.

Style Example

<iframe src=" http://www.gdatamart.com " style="width:100%;height:250px; border:6px solid lime;" > </iframe>
                                         

Output

Note : In HTML Iframe Element we can define global attributes like id, lang, title, scroll ect. And also we can define events attributes like onload, onresize, onerror and much more. How we can make use of global and events attributes it’s totally depends on us.

Iframe - Target for a Link

An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe

<iframe src="<URL>"  name ="iframe_a"> </iframe>

<a href="http://www.gdatamart.com"  target ="iframe_a">gdatamart.com</a>
                                    

The <Iframe> Tag Attributes

Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly like the corresponding attributes for the <frame> tag.

• The frameborder, marginwidth, longdesc, scrolling, marginheight attributes deprecated in HTML5. Do not use these attributes.

Tag Attributes