An HTML <iframe> (Inline Frame) is used to embed another HTML document within the current document. This allows you to display a webpage within a webpage, making it a powerful tool for including external content such as videos, maps, or other web applications.
Syntax
The basic syntax for an <iframe> is:
<iframe src="URL" width="width" height="height"></iframe>
Iframe Attributes
src: Specifies the URL of the document to be embedded.
width: Sets the width of the iframe (in pixels or as a percentage).
height: Sets the height of the iframe (in pixels or as a percentage).
allow: Specifies a feature policy for the iframe.
allowfullscreen: Allows the iframe to be viewed in full-screen mode.
loading: Specifies the loading behavior of the iframe (lazy or eager).
Example: Here’s an example of how to use an <iframe> to embed a Google website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Iframe Example</title>
</head>
<body>
<h1>Embedding a Google Map</h1>
<div class="iframe-container">
<iframe src="https://www.google.com" allowfullscreen loading="lazy">
</iframe>
</div>
</body>
</html>
Explanation of the Example
1. HTML Structure: The document includes a heading and a div container for the iframe.
Iframe Source: The src attribute is set to the URL of a Google Map embed link.
Use Cases:
Embedding Videos: Commonly used to embed YouTube or Vimeo videos.
Displaying Maps: Embed maps from services like Google Maps.
Including External Web Pages: Display content from another website or application within your site.