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

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