HTML - <iframe> Tag

HTML <iframe> tag is used to create an inline frame. An inline frame is used to show another html document into the cuurent html document. We can use HTML attributues and CSS property to decorate the iframe as we need.

Syntax

<iframe src="">
    .....
</iframe >

Attributes

HTML iframe tag accepts all HTML Global Attributes and Event Attributes.

Specific Attributes

HTML <iframe> tag accepts the following additional attributes as well.

Attribute	Value	Description
align	left right top middle bottom	Specifies how to align the iframe according to the surrounding text.
frameborder	1 0	Specifies whether or not to display border around the frame.
height	pixels	Specifies the height of the inline frame.
longdesc	URL	A URL to a long description of the frame contents.
marginheight	pixels	Allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth = "10".
marginwidth	pixels	Specifies the margin, in pixels, between the frame's contents and it's left and right margins.
name	text	Name of the frame
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	Enables a set of extra restrictions for the content in the iframe.
scrolling	yes no auto	Determines scrollbar action
seamless	seamless	Specifies that the iframe should look like it is a part of the containing document
src	URL	Location of the frame contents file
srcdoc	HTML_code	Specifies the HTML content of the page to show in the iframe
width	pixels	Specifies the width of the inline frame.

Try to click the icon run button to run the following HTML code to see the output.

Example of HTML iframe Tag

Creating a Simple iframe

In this example we will create an iframe and render our home screen within that iframe.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML iframe Tag</title>
   </head>

   <body>
       <h2>HTML iframe tag Example</h2>
      <iframe 
            src = "https://www.tutorialspoint.com/index.htm" 
            width = "600" height="400">
      </iframe>
      
   </body>

</html>

Removing border of Iframe

In this example we will remove the default border of the ifrma using CSS border property.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML iframe Tag</title>
   </head>

   <body>
       <h2>HTML iframe tag Example</h2>
      <iframe 
            src = "https://www.tutorialspoint.com/index.htm" 
            width = "600" height="400" style="border:none;">
      </iframe>
      
   </body>

</html>

Supported Browsers

Tag
iframe	Yes	Yes	Yes	Yes	Yes