Iframe tag HTML
Well, the iframe element represents some nested frame in our current document. In other words, we are embedding another HTML document into the current one.
First of all, let’s see how can we add an inline frame to our HTML document. Have a look at the below example, where we are trying the same –
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Some heading here…</title>
</head>
<body>
<iframe src=”sample.html” title=”a sample iframe”></iframe>
</body>
</html>
If we try to open the file in the browser, the output is going to be something like this –
As you can see, there is another HTML document embedded into the current one. It is having some default height and width, which can be changed with the help of height and width attributes.
By default, the height and width in pixels are 150 and 300 respectively. Let’s now try to change the values of the height and width, and observe the changes.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Some heading here…</title>
</head>
<body>
<iframe src=”sample.html” title=”a sample iframe” height=”400″ width=”500″></iframe>
</body>
</html>
If we try to open the file in the browser now, the output is something like this –
As you can see, we are able to see the change in height and width. You can also do this as per the requirement.
You can also use the iframe as a target frame for some links. Here is how we can do it –
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Some heading here…</title>
</head>
<body>
<iframe src=”sample.html” title=”a sample iframe” height=”400″ width=”500″ name=”sampleIframe”></iframe>
<div><a href=”https://www.gyanipandit.com/” target=”sampleIframe”>Open gyanipandit.com into the iframe</a></div>
</body>
</html>
Notice that the name of the Iframe and the target of the link is supposed to be the same, in order to achieve this. Now, if we try opening the file in the browser, the output is going to be something like this –
As you can see, we have a sample iframe here, and there is a link given below. If we click on the link, the website opens in the iframe.
