HTML Iframes

February 26, 2024
13 mins read
HTML Iframes

An HTML <iframe> (inline frame) is an HTML element that allows you to embed another document within the current HTML document. It is often used to embed content from other sources, such as a webpage, video, or interactive content, into a web page. The <iframe> element creates a rectangular region in the document, and the content from the specified source is displayed within that region.

Here's a basic example of how you might use the <iframe> element:


<!DOCTYPE html> <html> <head>  <title>Embedded Content</title> </head> <body> <h2>Embedding a Webpage using iframe</h2> <iframe src="" width="600" height="400"></iframe> </body> </html>

In this example, the content from the webpage will be displayed within the iframe, and the iframe itself will have a width of 600 pixels and a height of 400 pixels.

The <iframe> element can be customized using various attributes, such as src (specifying the source URL), width and height (setting the dimensions), frameborder (controlling whether or not to display a border around the iframe), and more.

It's worth noting that the use of <iframe> should be done with caution, especially when embedding content from external sources, to ensure security and avoid potential security risks like clickjacking.


HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.


<iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:


<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Try it Yourself »

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


<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>


Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:


<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

Try it Yourself »

With CSS, you can also change the size, style and color of the iframe's border:


<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

Try it Yourself »

Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:


<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="" target="iframe_a"></a></p>

Try it Yourself »

Chapter Summary

  • The HTML <iframe> tag specifies an inline frame
  • The src attribute defines the URL of the page to embed
  • Always include a title attribute (for screen readers)
  • The height and width attributes specify the size of the iframe
  • Use border:none; to remove the border around the iframe

HTML Exercises

Test Yourself With Exercises


Create an iframe with a URL address that goes to

<iframe =""></iframe>

Keep reading

More posts from our blog

Unleashing the Power of Social Media Marketing: A Comprehensive Guide
By March 03, 2024
In the rapidly evolving digital landscape, social media has emerged as a powerful force, revolutionizing the way businesses connect with their...
Read more