Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
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.

Exercise Files
No Attachment Found
No Attachment Found
error: Content is protected !!