Skip to main content

HTML Iframes

An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax​

An inline frame is specified via the HTML <iframe> element.

An inline frame is a type of frame that allows another page to be embedded into the current HTML text.

Syntax
<iframe src="url" title="description"></iframe>
Example
<iframe
  src="https://magenta-semolina-9b6e65.netlify.app/"
  title="description"
></iframe>
tip

It is usually a good idea to provide a title property for the iframe>. Screen readers use this to read aloud the content of the iframe.

Iframe - Set Height and Width​

To specify the size of the iframe, use the height and width parameters.

By default, the height and width are set in pixels:

Example
<iframe
  src="https://magenta-semolina-9b6e65.netlify.app/"
  height="500"
  width="800"
  title="Iframe Example"
></iframe>

Or you can add the style attribute and use the CSS height and width properties:

Example
<iframe
  src="https://magenta-semolina-9b6e65.netlify.app/"
  style="height:500px;width:800px;"
  title="Iframe Example 2"
></iframe>

Iframe - Remove the Border​

An iframe has a border around it by default.

Add the style attribute and use the CSS border property to remove the border:

Example
<iframe
  src="https://magenta-semolina-9b6e65.netlify.app/"
  title="Iframe Example"
></iframe>

You may also adjust the size, style, and colour of the iframe's border using CSS:

Example
<iframe
  src="https://magenta-semolina-9b6e65.netlify.app/"
  style="border:2px solid red;"
  title="Iframe Example"
></iframe>
Try it yourself
Loading...

Iframe - Target for a Link​

An iframe can serve as the destination frame for a link.

The link's target attribute must relate to the iframe's name attribute:

Example
<p>
  <a href="https://magenta-semolina-9b6e65.netlify.app/" target="iframe_a"
    >News App</a
  >
</p>
<iframe
  name="iframe_a"
  title="Iframe Example"
  height="500px"
  width="800px"
></iframe>
Loading...