HTML Iframe

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.

HTML Iframe – Interview Questions

Q 1: What is an iframe?

Ans: It embeds another webpage inside a webpage.

Q 2: Which tag is used for iframe?

Ans: .

Q 3: Which attribute specifies iframe source?

Ans: src.

Q 4: Can iframe embed YouTube videos?

Ans: Yes.

Q 5: Is iframe inline or block?

Ans: Inline element.