HTML Iframe

HTML Tutorial

About Lesson

HTML Iframe

In this tutorial, we will learn about iframe tag and its attributes in HTML with the help of examples.

Iframe

The iframe stands for Inline Frame. An iframe is used to display a web page within a web page.
An inline frame is used to embed another document within the current HTML document.
The iframe is used in an HTML page with the help of <iframe> tag.
The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.

Syntax :

<iframe src = "URL"></iframe>

Attributes in Iframe Tag

Attribute	Description
`height`	Determines the height of the content that should be loaded in the frame
`src`	It specifies the URL/path of the content that should be loaded in the frame
`width`	Determines the width of the content that should be loaded in the frame

Setting width and Height in Iframe

The width and height attributes are used to specify the size of the iframe.
The value of these attribute are specified in pixels (by default), but they can also be specified in %, rem, em, etc.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Setting width and height in iframe</title>
  </head>
  <body>
    <iframe src = "../HTML-tutorial" width = "600" height = 
"300"></iframe>
  </body>
</html>

Output

Removing the border in the iframe

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

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Removing the border in the iframe</title>
  </head>
  <body>
    <iframe src = "../HTML-tutorial" width = "600" height = 
"300" style = "border : none;"></iframe>
  </body>
</html>

Output

Target for a link in Iframe

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.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Setting width and height in iframe</title>
  </head>
  <body>
    <iframe src = "../HTML-image-icon" width = "600" height =
 "300" name = "iframe_target"></iframe>
    <p><a href = "../HTML-tutorial" target = "iframe_target">HTML
 Course</a>
  </body>
</html>

Output

HTML Course

In the above example, click on the link HTML Course to see the effect.

Reasons not to use <iframe> Tag

Copyright Issue

If you try to use any website in <iframe> tag without permission from an authenticated person.

Security Risk

By using <iframe> tag, your site become vulnerable to cross-site attacks.

Cause usability issues

IT tends to break the browsers back button.
Navigation of the site in the iframe stops working.
It increase the memory usage and other computing resources.
Content within the iframe is missing since the URL changed.
Navigation of the site in the iframe stops working.

Cause SEO problems

Content displayed using iFrames may not be indexed and available to appear in Google’s search results.