You already know how to create a webpage and tweak it using HTML tags. But can you remember seeing a company's website with information from another brand's website inside it? (A webpage within a webpage.) Or, have you ever come across a website with maps embedded in its pages? Such as a delivery company's webpage that shows a map of how close the delivery driver is to your address?
In this topic, you'll learn how to achieve these results using the <iframe> HTML tag. But first, you'll see how <frameset> was used for this purpose in the past.
Frameset
<frameset> HTML elements were used to contain <frame> elements. Frames aren't part of HTML5, but it's still good to be familiar with the syntax in case you encounter them in older web pages. The below code snippet creates three vertical frames within a webpage using the cols attribute:
<frameset cols="20%,60%,20%">
<frame name="left" src="image1.png" />
<frame name="center" src="image2.png" />
<frame name="right" src="image3.png" />
</frameset>You can also create horizontal frames using the rows attribute.
The <frameset> tag is deprecated and is not supported by many of the latest browsers. It was used to embed a webpage before the introduction of <iframe> in HTML5.
You can read more about the <frameset> tag in the MDN docs if you wish.
Iframe
An <iframe> HTML element is used to embed a document or website within the current HTML document. An <iframe> specifies an inline frame, and you can see its syntax below:
<iframe src="url" title="webpage-description"></iframe> It's standard practice to include a title attribute for an <iframe>. This lets other developers and code reviewers know what type of link is present in the src attribute of the <iframe>. The title is also used by screen readers when describing the content of the <iframe>.
Let's say you want to display a map from the Rainviewer website on your HTML page. Here's how you can do this:
<!DOCTYPE html>
<html>
<body>
<h2>HTML | Iframes</h2>
<p>Rainviewer is in my own HTML page. Hurray!!</p>
<iframe title="Embed Rainviewer" src="https://www.rainviewer.com/map.html?loc=40.7831,-73.9712,6&oFa=0&oC=0&oU=0&oCS=1&oF=0&oAP=0&rmt=4
&c=1&o=83&lm=0&th=0&sm=1&sn=1"></iframe>
</body>
</html>You can see how the output looks below:
So, the HTML page consists of an h2 type heading, a paragraph, and an <iframe>. The default width and height are small, but you can use the height and width attributes to specify the size of the <iframe>.
Embedding one website in another can produce great results but is sometimes considered bad practice. You can read about the pros and cons of using an <iframe> on this Stack Overflow page.
Iframe border
An <iframe> has a border around it by default. But you can use the CSS style property to remove it:
<!DOCTYPE html>
<html>
<body>
<h2>HTML | Iframes</h2>
<p>Rainviewer is in my own HTML page. Hurray!!</p>
<iframe title="Set border of frames" src="https://www.rainviewer.com/map.html?loc=40.7831,-73.9712,6&oFa=0&oC=0&oU=0&oCS=1&oF=0&oAP=0&rmt=4
&c=1&o=83&lm=0&th=0&sm=1&sn=1" width="1000" height="500" style="border:none"></iframe>
</body>
</html>The below example shows how the <iframe> looks with the border removed. The width and height attributes have also been set:
To practice, why not create your own HTML page and embed another page of your choice in it? Or use the link in the examples to embed a map from the Rainviewer website?
Iframe target
An <iframe> can be used as the target for a link. To do this, the target attribute of the link must refer to the name attribute of the <iframe>. Looking at an example should make this clearer. Try running the below on your machine and look at the output:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe | Target</h2>
<iframe title="Iframe | Target Example" src="https://cdn.bitdegree.org/learn/test-iframe.htm" name="my_iframe" height="300px" width="100%"
></iframe>
<p><a href="https://www.rainviewer.com/map.html?loc=40.7831,-73.9712,6&oFa=0&oC=0&oU=0&oCS=1&oF=0&oAP=0&rmt=4
&c=1&o=83&lm=0&th=0&sm=1&sn=1" target="my_iframe">Testing my target from a link</a></p>
<p>When the target attribute of a link matches the name of an iframe, the Rainviewer link will open in the iframe.</p>
</body>
</html>Conclusion
In this topic, you learned how to embed a document or website inside another HTML document using an <iframe>. You saw that the src attribute is utilized to specify the URL of the document that occupies the inline frame. You also discovered how to set the border of an <iframe>, specify its size, and use it as the target for a link. Don't forget that using an <iframe> can have significant drawbacks in some circumstances.