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
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.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Iframe in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Javascript.