What is the <iframe> tag in HTML?

Introduction to the <iframe> tag

The <iframe> tag is one of the most powerful HTML elements for enriching your web pages with external content. Whether you want to embed a YouTube video, a Google Maps location, a contact form hosted elsewhere, or even a complete web page, the iframe is your essential ally.

Understanding and mastering this tag is crucial for every modern web developer. If you're just starting with HTML, our comprehensive course will guide you step by step through learning all essential tags, including <iframe>.

In this complete article, we will explore in depth the syntax, attributes, best practices, and concrete use cases of this indispensable tag.

Definition and basic syntax

What is an iframe?

An <iframe> creates a rectangular window in your HTML page that displays content from another web resource. This resource can be an external HTML page, a video, an interactive map, a PDF document, or any other content accessible via a URL.

Unlike the old <frame> and <frameset> tags which are obsolete, the <iframe> tag remains fully supported and recommended in HTML5. It integrates directly into your document flow, hence its name "inline frame".

Basic syntax

Here is the minimal structure of an iframe:

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

However, in practice, you will always use additional attributes to control the appearance and behavior of the iframe:

<iframe 
  src="https://believemy.com"
  width="800"
  height="600"
  title="Believemy Website - Learning Platform"
></iframe>

Main characteristics

The <iframe> tag has several important characteristics:

• Paired tag: it requires both opening and closing tags
• Block-level element: it occupies the full available width by default
• Fallback content: text between the tags displays if the browser doesn't support iframes
• Nested browsing context: the loaded content has its own navigation history
• Isolation: the iframe content is isolated from the parent document

Essential iframe attributes

The src attribute

The src attribute is the most fundamental. It defines the URL of the resource to display in the iframe:

<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

You can use absolute URLs (starting with http:// or https://) or relative URLs (pointing to files on your own site).

The width and height attributes

These attributes define the iframe dimensions in pixels:

<iframe 
  src="course-page.html"
  width="600"
  height="400"
></iframe>

The title attribute (required for accessibility)

The title attribute is essential for accessibility. It describes the iframe content to screen reader users:

<iframe 
  src="https://believemy.com/en/courses"
  title="Believemy Course Catalog"
></iframe>

Without this attribute, people using assistive technologies won't be able to understand the iframe content.

The name attribute

The name attribute allows targeting the iframe from links or forms:

<iframe 
  name="result-display"
  src="welcome.html"
></iframe>

<a href="courses-page.html" target="result-display">
  View courses
</a>

Clicking the link will display "courses-page.html" in the iframe named "result-display".

The loading attribute

The loading attribute helps optimize iframe loading:

<!-- Lazy loading -->
<iframe 
  src="heavy-content.html"
  loading="lazy"
></iframe>

<!-- Eager loading (default) -->
<iframe 
  src="priority-content.html"
  loading="eager"
></iframe>

Lazy loading is particularly useful for iframes located at the bottom of the page, as they will only load when the user scrolls near them.

The sandbox attribute

The sandbox attribute is crucial for security. It imposes restrictions on the iframe content:

<!-- Iframe with all restrictions -->
<iframe 
  src="external-content.html"
  sandbox
></iframe>

<!-- Iframe with certain permissions -->
<iframe 
  src="form.html"
  sandbox="allow-forms allow-scripts"
></iframe>

Possible values for sandbox include:

The allow attribute

The allow attribute defines specific permissions granted to the iframe for browser APIs:

<iframe 
  src="https://player.video.com/embed/xyz"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen"
></iframe>

This attribute is essential for video players and other interactive content that require access to certain browser features.

Practical usage examples

Embedding a YouTube video

One of the most common uses of iframes is video embedding:

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="HTML Tutorial - Believemy Course"
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen
></iframe>

YouTube provides the embed code directly via the "Share" button then "Embed" under each video.

Embedding a Google Map

Interactive maps are also very popular:

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!..."
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade"
  title="Our office location"
></iframe>

Embedding a PDF document

You can display a PDF directly in your page:

<iframe 
  src="documents/course-catalog.pdf"
  width="100%" 
  height="800"
  title="Course Catalog PDF"
>
  <p>Your browser does not support iframes. 
  <a href="documents/course-catalog.pdf">Download the PDF</a>.
  </p>
</iframe>

Creating a responsive iframe

To make your iframe adapt to all screen sizes, use the container with ratio technique:

<div class="iframe-container">
  <iframe 
    src="https://believemy.com/en/courses"
    title="Believemy Courses"
    allowfullscreen
  ></iframe>
</div>

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

This technique maintains the iframe's aspect ratio regardless of screen width.

Best practices and security

Always use HTTPS

Always load content via HTTPS to ensure security:

<!-- ✓ Correct -->
<iframe src="https://secure-site.com/page"></iframe>

<!-- ✗ Avoid -->
<iframe src="http://insecure-site.com/page"></iframe>

Modern browsers often block mixed content (HTTP in an HTTPS page).

Use the sandbox attribute for untrusted content

When embedding external content you don't fully control, always use sandbox:

<iframe 
  src="https://external-site.com/widget"
  sandbox="allow-scripts allow-same-origin"
  title="External widget"
></iframe>

Don't forget accessibility

Accessibility is paramount. Here are the essential points:

• Always include a descriptive title attribute
• Provide alternative content between the tags
• Ensure the iframe content itself is accessible

<iframe 
  src="price-calculator.html"
  title="Course price calculator"
>
  <p>Your browser does not support iframes. 
  Please <a href="price-calculator.html">access the calculator directly</a>.
  </p>
</iframe>

Optimize performance

Iframes can impact your page's performance. Here's how to optimize them:

• Use loading="lazy" for iframes not immediately visible
• Limit the number of iframes per page
• Prefer lightweight embeds when possible
• Load iframes after main content if necessary

Common mistakes to avoid

Forgetting dimensions

Without defined dimensions, the iframe may have unpredictable size:

<!-- ✗ Problematic -->
<iframe src="page.html"></iframe>

<!-- ✓ Correct -->
<iframe 
  src="page.html"
  width="800"
  height="600"
></iframe>

Ignoring X-Frame-Options restrictions

Some sites prohibit their display in iframes via the X-Frame-Options HTTP header. You cannot bypass this restriction client-side:

<!-- This won't work if the site prohibits it -->
<iframe src="https://facebook.com"></iframe>

Using frameborder (obsolete)

The frameborder attribute is obsolete in HTML5. Use CSS instead:

<!-- ✗ Obsolete -->
<iframe src="page.html" frameborder="0"></iframe>

<!-- ✓ Modern -->
<iframe src="page.html" style="border: none;"></iframe>

Communication between iframe and parent page

Using postMessage

To communicate securely between a parent page and an iframe, use the postMessage API:

// In parent page: send message to iframe
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello from Believemy!', 'https://target-site.com');

// In iframe: receive message
window.addEventListener('message', function(event) {
  // Always verify origin!
  if (event.origin !== 'https://believemy.com') return;
  
  console.log('Message received:', event.data);
});

This method is the only secure way to communicate between content from different origins.

Browser compatibility

The <iframe> tag enjoys excellent compatibility with all modern browsers:

Newer attributes like loading="lazy" have slightly more limited support but with graceful fallbacks.

Frequently asked questions about iframes

The <iframe> tag loads a complete HTML page with its own browsing context, while the <embed> tag is intended for integrating plugins or multimedia content like PDFs. For embedding an external web page, iframe is the appropriate choice.

This can have several causes: the target site blocks embedding via the X-Frame-Options header, there's an error in the URL, or the content requires an HTTPS connection you're not using. Also check the browser console for more details.

Content within an iframe is generally not indexed as part of your page. If the content is important for your ranking, it's better to integrate it directly into your HTML rather than via an iframe. Iframes are perfect for third-party content like videos or maps.

To master HTML and all its tags like <iframe>, our step-by-step course guides you from zero to creating complete websites. You'll learn best practices, accessibility, and modern HTML used by professionals.