This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



HTML <iframe> Tag

The <iframe> tag creates an inline frame for embedding third-party content (media, applets, etc.). The content of the frame and the web page are independent, but they can interact through JavaScript.

Not all browsers support frames. we must define an alternate text, which will be displayed to the user, if the browser cannot display the content of the frame.

The src attribute is required for the <iframe> tag. It defines the URL of the document, which must be displayed in the frame.

Syntax

The content of the element is written between the opening (<iframe>) and the closing (</iframe>) tags.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com"></iframe>
  </body>
</html>

Result

To set the size of iframe you can use the height and width attributes, or use CSS. The attribute values are set in pixels by default, but they can also be in percent.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" width="80%" height="300"></iframe>
  </body>
</html>

Result

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" width="80%" height="300" style="border: none"></iframe>
  </body>
</html>

Result

Attributes

Attribute Value Description
align left
right
top
bottom
middle
Specifies how text is aligned and wrapped around the frame.
Not supported in HTML5.
allowfullscreen Defines that the frame can be opened in a full screen mode.
frameborder 1
0
Defines if the border around the frame should be displayed or not.
Not supported in HTML 5.
height pixels Defines the height of the frame (default height 150 pix).
longdesc URL Defines a page which has a long description of the content.
Not supported in HTML 5.
marginheight pixels Defines the top and bottom margins of the frame.
Not supported in HTML 5.
marginwidth pixels Defines the left and right margins of the frame.
Not supported in HTML 5.
name text Defines the name of the frame.
sandbox
Brings extra restrictions for the content inside the frame.
"" Applies all restrictions.
allow-forms Allows submission of forms or an embedded page.
allow-same-origin Considers the attached document as a document downloaded from the same source as the parent document.
allow-scripts Enables execution of scripts on a nested page.
allow-top-navigation Allows the contents of the attached document to access top-level elements (documents, windows).
scrolling yes
no
auto
Defines whether the scroll bar should be displayed or not.
Not supported in HTML 5.
seamless seamless Specifies that the contents of the attached document should be displayed as part of the parent document.
src URL Specifies the address of the document whose contents will be loaded into the frame.
srcdoc HTML_code Stores the contents of the frame directly in the attribute.
width pixels Defines the width of the frame. (default width is 300px).

The <iframe> tag supports the Global attributes and the Event Attributes.

Browser support