How does the tag work and what is it used for?

How does the <iframe> tag work and what is it used for?

LowIntermediateHtml

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Browse HTML interview questions Explore interview tracks Browse company questions

Quick Answer

The <iframe> (inline frame) tag allows you to embed another HTML page within the current page. It’s commonly used to display external content such as videos, maps, ads, or other web pages without leaving the parent site.

Answer

Overview

The iframe tag creates an inline frame that embeds another webpage inside the current document. It acts like a small browser window within your page, allowing you to load external or internal HTML content.

Attribute	Purpose	Example Value
`src`	Specifies the URL of the page to display	`src="https://example.com"`
`width` / `height`	Define frame dimensions	`width="600" height="400"`
`title`	Provides an accessible name for screen readers	`title="Embedded map"`
`allowfullscreen`	Lets embedded videos enter fullscreen mode	`allowfullscreen`
`loading`	Controls loading behavior for performance	`loading="lazy"`

Common attributes of the <iframe> element

Basic Example

HTML

<iframe src="https://www.example.com" width="600" height="400" title="Example Website"></iframe>

This code embeds the page at https://www.example.com directly inside your webpage.

Example: Embedding a YouTube Video

HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

The YouTube video is displayed inside the frame, allowing playback without leaving your site.

Security and Best Practices

Always specify the title attribute for accessibility.
Use the sandbox attribute to restrict what embedded content can do (e.g., prevent scripts or forms).
Only embed trusted sources — malicious sites could attempt cross-site scripting (XSS) attacks.
Use loading="lazy" to improve performance by deferring off-screen iframes.

Sandbox Example

You can limit iframe permissions using the sandbox attribute:

HTML

<iframe src="/docs/guide.html" sandbox></iframe>
<!-- Disables scripts, forms, and same-origin access -->

Still so complicated?

Think of an iframe as a window inside your page — it shows another page, but you can decide how much control that page has through attributes like sandbox or allowfullscreen.

Summary

iframe embeds one webpage into another.
Commonly used for videos, maps, or third-party content.
Supports attributes like src, title, sandbox, and allowfullscreen.
Use it responsibly to avoid performance or security issues.