In this article, you will get complete information about an important HTML tag <iframe>. You will know what <iframe> is, how it is used, what are its important properties, a basic example will also be given and you will also understand how <iframe> helps in SEO. The entire article is written in very simple Hindi which any beginner can easily understand.
What is <iframe> tag?
The full form of <iframe> in HTML is Inline Frame. This is a tag through which we can display another website or webpage inside our page. Meaning, if you want another webpage to appear on your page, then you can use <iframe> for that.
Just like a photo frame contains a photo, an iframe contains the content of another webpage.
Why and how is the <iframe> tag used?
Iframe is used when we want to use another site inside our web page or show the content of our own other page without loading that page completely. It is used in many places like:
- Embedding YouTube videos
- Showing Google Maps
- PDF or document viewer
- Previewing another website
The basic syntax of an iframe is something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
iframe {
width: 100%;
height: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Embedded Website with Iframe</h1>
<iframe src="https://www.example.com" title="Example Website"></iframe>
</body>
</html>
Source means the "source" from where the iframe content will come from.
Important Attributes of the iframe tag
The iframe tag has several attributes that control its functionality and design. Below are the most important attributes:
Source
This specifies which page to display in the iframe. This is the most important attribute.
Example: src='https://www.example.com'
Width
Specifies the width (width) of the iframe.
Example: width='600'
Height
Specifies the height (height) of the iframe.
Example: height='400'
Title
Sets the title of the iframe which is important for accessibility.
Example: title='Youtube Video'
Frame border
Specifies whether the iframe will be surrounded by a border.
Example: frameborder="0"
AllowFullScreen
If you embed a video player in an iframe then you can set this attribute to allow full screen.
Example: allowfullscreen
Loading
This can be done by doing lazy loading in which the iframe tab loads when the user scrolls to it.
Example: loading="lazy"
Sandbox
This controls the security of the content in the iframe. You can disable or enable some features in it.
Example: sandbox="allow-scripts"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Iframe Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 aspect ratio */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body>
<h1>Embedded YouTube Video</h1>
<div class="video-container">
<iframe src="https://youtu.be/QznsCpYcxFI?si=cJD7pWJ-oHnTteIk" title="Working YouTube Video"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</body>
</html>
In the above example, a YouTube video is shown inside an iframe.
How does <iframe> help in SEO?
Iframes have a mixed effect on SEO (search engine optimization). They can help or hurt SEO in a few ways:
Advantages
- If you embed content from a trusted source (e.g. Google Maps, YouTube), your page's credibility increases.
- User engagement can increase, such as people watching a video or using a map.
Disadvantages
- Search engines cannot read the content inside an iframe directly, so SEO content inside an iframe is not helpful for your page.
- The page loading speed can be a little slow if the iframe is heavy.
Tip: Iframes should be used judiciously and techniques like lazy loading should be used.
Conclusion
The iframe tag is a powerful HTML element that lets you embed content from another site into your web page. This tag is simple but useful when used correctly. It is used to display videos, maps, forms, and other external content. There is a slight SEO risk, but if used correctly, it improves both the functionality and user experience of your website.
So now whenever you want to display another page in your page, without redirecting, the iframe tag will be your best friend!