HTML Iframes
In this page:
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.
Warning: Avoid embedding websites that do not use secure HTTPS protocols, as browsers will block them for security reasons.
Example: What is an Iframe?
<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.
Warning: If your iframe is too narrow, the embedded website will become cramped and difficult for users to read.
Example: Controlling Iframe Dimensions
<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
<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.
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
<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.
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
<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.
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
<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.
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
<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.
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
<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
<iframe src="https://maps.example.com/embed" title="Store location map"></iframe>- Forgetting to use secure HTTPS protocols in your iframe source paths, causing browsers to block the frame.
- Omitting sandbox attributes on untrusted iframe sources, leaving your webpage vulnerable to cross-site scripting risks.
- Attempting to embed major websites (like Google or Facebook) that intentionally block iframe loading using security headers.
- 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.
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: