HTML - <iframe> Tag

Quiz

The <iframe> Tag

The HTML <iframe> tag is used to create an inline frame, which embeds another HTML document within the current one. We can use HTML attributes and CSS properties to style the iframe as need.

Syntax

Following is the syntax of <iframe> tag −

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

Attributes

The HTML <iframe> tag supports all Global and Event Attributes. Additionally, the <iframe> tag accepts the following specific attributes.

Attribute	Value	Description
align	left right top middle bottom	Specifies how to align the <iframe> with the surrounding text.
frameborder	1 0	Specifies whether to display a border around the frame.
height	pixels	Specifies the height of the <iframe>.
longdesc	URL	Specifies a URL for a detailed description of the frame contents.
marginheight	pixels	Allows the width of the space between the left and right borders of the frame and its content. The value is given in pixels, for example margin-width = "10".
marginwidth	pixels	Specifies the margin, in pixels, between the frame's contents and it's left and right borders.
name	text	Name of the frame
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	Specifies a set of additional restrictions for the content within the <iframe>.
scrolling	yes no auto	Specifies the scroll-bar behavior.
seamless	seamless	Specifies that the <iframe> should appear as part of the containing document.
src	URL	Specifies the 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.

Click the icon "Run" button to execute the following HTML code and see the output.

Example: Simple <iframe> Creation

In this example, we will create an <iframe> to display our home screen. This HTML code generates a web-page with an <iframe> that is within a 600*400 pixel frame.

<!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>

Example: Removing <iframe> Border

In this example, we will remove the default border of the <iframe> using the CSS border property. This HTML code creates a web-page with an <iframe> displaying content within the 600*400 pixel border-less frame.

<!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

Print Page