The <iframe> tag embeds another HTML document or webpage inside the current page. It creates an inline frame that can display content from another source, like videos, maps, or entire web pages.

<iframe

Step 2

The src attribute specifies the URL of the page to embed. You can also set width and height. Always include a title attribute for accessibility. The iframe creates a nested browsing context.

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

Step 3

Common uses include embedding YouTube videos, Google Maps, social media posts, or PDFs. Always use the title attribute for accessibility. Consider security with sandbox and allow attributes.

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" title="YouTube Video" allowfullscreen></iframe>

Step 4

In the browser, the iframe displays the embedded content. The content loads from the src URL and appears within the iframe's boundaries.

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

Step 5

Checkpoint: Which attribute is required for <iframe> to embed content?

<iframe src="https://example.com" title="Example"></iframe>

Step 6

Correct! The src attribute is required and specifies the URL of the page to embed. Always include title for accessibility.

<iframe src="https://example.com" title="Example"></iframe>

Step 7

Now it's your turn. Iframes are powerful for embedding content. Complete the challenges below to master the <iframe> tag!

iframe.html

1 / 7

🖼️

TutorThe <iframe> tag embeds another HTML document or webpage inside the current page. It creates an inline frame that can display content from another source, like videos, maps, or entire web pages.

⭐ 0 EXP

Iframe Mastery

Unlock nodes by learning iframe embedding and security.

Concept 1: The Iframe Tag

The <iframe> tag embeds another HTML document or webpage inside the current page. It creates an inline frame that can display content from another source, like videos, maps, or entire web pages.

System Check

Which attribute is required for <iframe> to embed content?

hrefsrcurllink

Community Holo-Net

Share Iframe Embeddings

Created effective iframe embeddings? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

Definitive Guide to HTML <iframe>

Pascual Vila

Frontend Instructor

What is an Iframe?

The HTML <iframe> tag embeds another HTML document or webpage inside the current page. It creates a secondary, inline frame that can display content from external sources. The embedded document establishes a nested browsing context, meaning it operates independently of the parent document.

How to Embed Content using src

To display external content, the src attribute is mandatory. It specifies the direct URL of the page you intend to embed. You can customize the visual footprint by defining width and height attributes.

Accessibility Rule: Always include a descriptive title attribute to inform screen readers about the iframe's content.

Iframe Security & Sandbox Attribute

Embedding third-party content carries inherent security risks, such as clickjacking or malicious script execution. The sandbox attribute is the standard defense mechanism. When applied, it applies severe restrictions to the embedded content, disabling scripts, forms, and popups by default.

You can systematically re-enable specific capabilities using the sandbox attribute's space-separated values, like sandbox="allow-scripts allow-same-origin". Additionally, the allow attribute dictates access to browser features such as the camera or microphone.

Iframe Tag Glossary

<iframe>: HTML element that embeds another HTML document or webpage inside the current page. Creates an inline frame for displaying content from another source.
src Attribute: Required attribute that specifies the URL of the page to embed. The iframe loads content from this URL.
title Attribute: Required for accessibility. Describes the iframe's content for screen readers. Always include a meaningful title.
sandbox Attribute: Security attribute that restricts what the iframe can do. Can prevent scripts, forms, popups, and other potentially dangerous features. Use for untrusted content.
Nested Browsing Context: The iframe creates a separate browsing context within the parent page. The embedded content is isolated from the parent page's JavaScript and CSS.

📖 INDEX