The <iframe> tag in HTML is used to embed an external web page or document within the current HTML document. This is useful for displaying content from other websites, such as videos, maps, or social media feeds, directly within your own web page.
Here’s an example of how to use the <iframe> tag:
<!DOCTYPE html>
<html>
<head>
<title>Example Iframe Page</title>
</head>
<body>
<h1>Example Iframe Page</h1>
<p>Here is an example of an iframe that embeds a Google map:</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d169753.1773452439!2d-122.41941599999999!3d37.7749295!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f8fca0d311c71%3A0xe07d8b1a11b96403!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1597385817369!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>
</html>
Output:
In this example, we embed a Google map using an <iframe> tag. The src attribute specifies the URL of the external document that will be embedded. The width and height attributes specify the dimensions of the iframe. The frameborder attribute set to 0 removes the border around the iframe, while the style attribute is used to add some additional styles to the iframe element. Finally, the allowfullscreen attribute is added to enable full screen mode and the aria-hidden and tabindex attributes are added for accessibility purposes.
When the page is loaded in a web browser, the Google map will be displayed within the iframe on the page.
It’s important to note that when using iframes, you should ensure that the content being embedded is trustworthy and safe, as it has the potential to execute scripts and other code within your web page. Additionally, some websites may not allow their content to be embedded in iframes, so be sure to check their terms of use before using an iframe to display their content.
