← Back to HTML Course | Chapter 3: Page Structure | Lesson 4 of 12

HTML Iframes

Imagine sitting in your living room and mounting a high-tech TV screen on the wall. But instead of showing local cable channels, this screen is a direct live portal showing exactly what is happening in a park across town. An HTML iframe is that digital portal. It is a portal embedded directly inside your webpage that displays another complete website. You can use iframes to embed videos, interactive map locators, external widgets, or document previews on your page without forcing visitors to leave your site.

In this page:

  1. What is an Iframe?
  2. Controlling Iframe Dimensions
  3. Customizing Iframe Borders
  4. Security and the sandbox Attribute
  5. Targeting Links Inside Iframes
  6. Lazy Loading Iframes
  7. The title Attribute for Accessibility
  8. The referrerpolicy Attribute
  9. Common Iframe Use Cases
Syntax
markup 
<iframe src="url" title="Description" width="width" height="height"></iframe>

What is an Iframe?

An iframe (short for 'inline frame') is used to embed another HTML document inside your current webpage. The src attribute tells the browser the web address of the external page you want to display.

Note:
  • Use iframes to embed interactive widgets like maps or video players from other services.
  • Accepted attributes:
  • src — URL of the page to embed
  • srcdoc — inline HTML to render
  • title — accessible description of the frame
  • width / height — pixel dimensions
  • name — target name for links
  • allow, sandbox, loading, referrerpolicy — see later sections
Warning: Avoid embedding websites that do not use secure HTTPS protocols, as browsers will block them for security reasons.

Example: What is an Iframe?

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

Controlling Iframe Dimensions

By default, browsers display iframes in a small, pre-set box. You can easily control their width and height using HTML attributes or CSS properties to make them fit your layout.

Note:
  • Using CSS styling is the best practice for building fluid, mobile-friendly iframes.
  • Accepted attributes:
  • width — integer pixels (or CSS width)
  • height — integer pixels (or CSS height)
  • frameborder, scrolling — obsolete; use CSS
Warning: If your iframe is too narrow, the embedded website will become cramped and difficult for users to read.

Example: Controlling Iframe Dimensions

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

Customizing Iframe Borders

By default, browsers render iframes with a dark, boxy border that can clash with your website design. You can easily remove or customize this border using CSS properties.

Note: Set the border property to none in your CSS to make the embedded content blend seamlessly into your page.
Warning: Removing the border can make it hard for users to tell where your webpage ends and the embedded page begins.

Example: Customizing Iframe Borders

markup 
<iframe src="https://example.com" style="border: none;"></iframe>

Security and the sandbox Attribute

Embedding external websites can be risky, as they can run unwanted scripts on your page.

The sandbox attribute restricts the embedded page's permissions, preventing it from running malicious scripts or sending pop-ups unless you explicitly allow them.

Note:
  • Always use the sandbox attribute when embedding websites that you do not fully control.
  • Accepted values:
  • sandbox (empty) — apply all restrictions
  • allow-scripts — permit JavaScript
  • allow-same-origin — keep the origin
  • allow-forms — permit form submission
  • allow-popups — permit window.open and target=_blank
  • allow-top-navigation — permit navigating the top page
  • allow-modals — permit alert, confirm, prompt
Warning: Leaving the sandbox attribute entirely empty will disable all scripts, forms, and pop-ups on the embedded page, which can break its features.

Example: Security and the sandbox Attribute

markup 
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

Targeting Links Inside Iframes

You can use iframes to build interactive portals where clicking a link on your main page loads the new page directly inside the iframe. You do this by naming your iframe and referencing that name in your links' target attributes.

Note:
  • This technique is great for building simple document portals or interactive sidebars.
  • Accepted attributes:
  • iframe name — identifier used as a target
  • a target — the iframe name | _self | _blank | _parent | _top
Warning: Many modern websites use security headers that prevent them from being loaded inside iframes, which will display a blank block.

Example: Targeting Links Inside Iframes

markup 
<iframe name="portal" src="page1.html"></iframe>
<a href="page2.html" target="portal">Load page 2 in iframe</a>

Lazy Loading Iframes

Just like images, adding loading="lazy" to an iframe tells the browser to delay loading its content until the iframe is about to scroll into view.

This is especially valuable for embedded maps or videos further down a page, which can otherwise slow down the initial page load significantly.

Note:
  • Always lazy load iframes that appear below the visible screen area on first load, like an embedded map near the bottom of a contact page.
  • Accepted values:
  • loading — lazy | eager (default)
Warning: Do not lazy load an iframe that is visible immediately when the page loads — it provides no benefit and can occasionally cause a brief visible delay.

Example: Lazy Loading Iframes

markup 
<iframe src="https://maps.example.com" loading="lazy"></iframe>

The title Attribute for Accessibility

Every iframe should have a title attribute describing what it contains, since screen readers announce this title to help users understand the purpose of the embedded content before deciding whether to interact with it.

Note:
  • Write iframe titles the same way you would write good alt text — concise and descriptive of the actual content, not generic.
  • Accepted attributes:
  • title — short text describing the frame content; read by screen readers
Warning: An iframe with no title attribute is often announced to screen reader users simply as an unlabeled frame, giving them no idea what it contains.

Example: The title Attribute for Accessibility

markup 
<iframe src="https://example.com" title="Customer support chat widget"></iframe>

The referrerpolicy Attribute

The referrerpolicy attribute controls how much information about your page gets sent to the embedded iframe's destination in the Referer header.

Setting a stricter policy like no-referrer or strict-origin protects your users' browsing privacy from the embedded third-party content.

Note:
  • Use referrerpolicy="strict-origin-when-cross-origin" as a reasonable default that balances privacy with still sending useful analytics data.
  • Accepted values:
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin
  • strict-origin-when-cross-origin
  • unsafe-url
Warning: The default referrer behavior can leak your page's full URL, including any sensitive query parameters, to every embedded iframe's destination.

Example: The referrerpolicy Attribute

markup 
<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>

Common Iframe Use Cases

Iframes are commonly used for embedding maps, video players, payment widgets, social media posts, and third-party comment systems — anything where you want to include content controlled by another service without rebuilding it yourself.

Note: Whenever a third-party service offers an official embed code, use their exact recommended iframe attributes rather than writing your own from scratch.
Warning: Embedding too many third-party iframes on one page, each loading their own scripts and trackers, can seriously slow down your overall page performance.

Example: Common Iframe Use Cases

markup 
<iframe src="https://maps.example.com/embed" title="Store location map"></iframe>
Live Example
Related Topics

HTML Id · HTML JavaScript · HTML Classes · HTML File Paths

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to use secure HTTPS protocols in your iframe source paths, causing browsers to block the frame.
  2. Omitting sandbox attributes on untrusted iframe sources, leaving your webpage vulnerable to cross-site scripting risks.
  3. Attempting to embed major websites (like Google or Facebook) that intentionally block iframe loading using security headers.
Chapter Summary
  • The iframe element embeds another HTML document directly inside your current webpage.
  • Control the size of your iframe and customize or remove its default borders using CSS.
  • Always use the sandbox attribute to restrict permissions on embedded external sites and protect your webpage security.
Browser Support

Standard inline iframe elements are fully supported across all modern web browsers.

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson HTML Id Next Lesson → HTML JavaScript

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.