htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

HTML Iframes

Discover techniques for integrating external webpage content directly within your document structure through inline frame elements

Quick Answer

What is an HTML iframe?

An iframe (inline frame) is an HTML element that embeds another webpage inside the current page using the <iframe> tag. It's commonly used for embedding videos, maps, advertisements, or external content while maintaining security through sandbox attributes.

Inline frames (iframes) render nested webpage content inside parent documents. The <iframe> element establishes embedded viewing regions displaying separate HTML resources within hosting pages.

HTML Iframe Syntax

The HTML <iframe> tag defines an inline frame:

Syntax

Explanatory iframe syntax: replace the placeholder URL and title in your own page. Nested frames are blocked in this playground. Unavailable or blocked: embedded content “url”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.

Iframe Example

The following example shows how to embed a web page within a web page:

Example

Explanatory external-page embed: this playground blocks nested frames, so the embedded website is not shown here. Unavailable or blocked: embedded content “https://www.example.com”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Try it Yourself ›

Click the button below to open this example in our interactive editor:

Inspect this snippet

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example

Explanatory iframe markup: demo_page.html is a sample dependency and is not supplied. Nested frames stay blocked in this playground. Unavailable or blocked: embedded content “demo_page.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="demo_page.html" height="200" width="300" title="Demo Iframe"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

Example

Explanatory iframe markup: demo_page.html is a sample dependency and is not supplied. Nested frames stay blocked in this playground. The snippet includes CSS inside its HTML. Unavailable or blocked: embedded content “demo_page.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="demo_page.html" style="height:200px;width:300px;" title="Demo Iframe"></iframe>

Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

Explanatory iframe markup: demo_page.html is a sample dependency and is not supplied. Nested frames stay blocked in this playground. The snippet includes CSS inside its HTML. Unavailable or blocked: embedded content “demo_page.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="demo_page.html" style="border:none;" title="Demo Iframe"></iframe>

With CSS, you can also change the size, style, and color of the iframe's border:

Example

Explanatory iframe markup: demo_page.html is a sample dependency and is not supplied. Nested frames stay blocked in this playground. The snippet includes CSS inside its HTML. Unavailable or blocked: embedded content “demo_page.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="demo_page.html" style="border:2px solid red;" title="Demo Iframe"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

Explanatory iframe markup: demo_page.html is a sample dependency and is not supplied. Nested frames stay blocked in this playground. Unavailable or blocked: embedded content “demo_page.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="demo_page.html" name="iframe_a" title="Demo Iframe"></iframe>

<p><a href="https://www.example.com" target="iframe_a">Example.com</a></p>

Explanation:

When you click the link, the page will open in the iframe instead of the current window.

Common Iframe Attributes

Here are some commonly used attributes for the <iframe> element:

Attribute Description
src Specifies the URL of the page to embed
title Specifies the title of the iframe (required for accessibility)
height Specifies the height of the iframe (in pixels)
width Specifies the width of the iframe (in pixels)
name Specifies a name for the iframe (used as a link target)
loading Specifies whether to load the iframe on page load or when it's visible (eager or lazy)
sandbox Enables extra restrictions on the content in the iframe
allow Specifies a feature policy for the iframe

Iframe - Lazy Loading

The loading attribute can be used to defer loading of iframes that are off-screen until the user scrolls near them:

Example

Explanatory iframe markup: demo_page.html is a sample dependency and is not supplied. Nested frames stay blocked in this playground. Unavailable or blocked: embedded content “demo_page.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="demo_page.html" loading="lazy" title="Demo Iframe"></iframe>

Benefits:

  • Improves page load performance
  • Reduces initial bandwidth usage
  • Saves data for mobile users

Iframe - Sandbox Attribute

The sandbox attribute enables extra restrictions on the content in the iframe. This is important for security when embedding untrusted content.

Example - Basic Sandbox

Explanatory iframe markup: demo_page.html is a sample dependency and is not supplied. Nested frames stay blocked in this playground. Unavailable or blocked: embedded content “demo_page.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="demo_page.html" sandbox title="Sandboxed Iframe"></iframe>

Note:

An empty sandbox attribute applies all restrictions. You can selectively allow specific features:

Example - Allow Specific Features

Explanatory iframe markup: demo_page.html is a sample dependency and is not supplied. Nested frames stay blocked in this playground. Unavailable or blocked: embedded content “demo_page.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="demo_page.html" sandbox="allow-scripts allow-same-origin" title="Sandbox Iframe"></iframe>

Sandbox Values:

Value Description
allow-forms Allows form submission
allow-scripts Allows scripts to run
allow-same-origin Allows the iframe to be treated as same origin
allow-popups Allows popups to open
allow-modals Allows modal windows (alert, confirm, prompt)

Making Iframes Responsive

To make an iframe responsive, you can use CSS to make it scale with the viewport:

Example - Responsive Iframe

Explanatory iframe markup: demo_page.html is a sample dependency and is not supplied. Nested frames stay blocked in this playground. The snippet includes CSS inside its HTML. Unavailable or blocked: embedded content “demo_page.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<style>
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="iframe-container">
    <iframe src="demo_page.html" title="Responsive Iframe"></iframe>
</div>

How it works:

  • The container uses padding-bottom to maintain aspect ratio
  • The iframe is absolutely positioned to fill the container
  • Change padding-bottom for different aspect ratios (75% = 4:3, 56.25% = 16:9)

Common Uses for Iframes

🎥 Video Embedding

YouTube, Vimeo, and other video platforms use iframes to embed videos:

Explanatory YouTube embed: supply a real video ID in your own page. Third-party players are not loaded in this playground. Unavailable or blocked: embedded content “https://www.youtube.com/embed/VIDEO_ID”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

🗺️ Maps

Google Maps and other mapping services use iframes for embedding maps:

Explanatory map embed: replace the shortened sample map address in your own page. Third-party frames are not loaded in this playground. Unavailable or blocked: embedded content “https://maps.google.com/maps?...”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="https://maps.google.com/maps?..." width="600" height="450" title="Google Map"></iframe>

📱 Social Media

Social media platforms use iframes for embedded posts and feeds:

Explanatory social-post embed: replace the shortened sample address in your own page. Third-party frames are not loaded in this playground. Unavailable or blocked: embedded content “https://www.facebook.com/plugins/post...”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<iframe src="https://www.facebook.com/plugins/post..." title="Facebook Post"></iframe>

📊 Third-Party Widgets

Analytics dashboards, payment forms, and other widgets often use iframes for isolation and security.

Iframe Accessibility

Making iframes accessible is crucial for users who rely on assistive technologies like screen readers. Here are the key accessibility considerations:

Essential Accessibility Attributes:

  • title attribute (Required): Provides a descriptive name that screen readers announce. This helps users understand the iframe's purpose before interacting with it.
  • Descriptive titles: Use clear, meaningful titles like "Customer feedback form" instead of generic ones like "form" or "iframe"
  • aria-label: Can be used as an alternative to title for more detailed descriptions
  • role attribute: Can specify the iframe's role (e.g., role="application" for interactive widgets)

Example - Accessible Iframe

Explanatory accessible-iframe markup: contact-form.html is a sample dependency, not a form supplied by this site. Nested frames stay blocked in this playground. Unavailable or blocked: embedded content “contact-form.html”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<!-- Good: Descriptive title for screen readers -->
<iframe
    src="contact-form.html"
    title="Contact us form - Send us your feedback"
    loading="lazy"
    width="100%"
    height="500">
    <!-- Fallback content for browsers that don't support iframes -->
    <p>Your browser does not support iframes.
       <a href="contact-form.html">Visit our contact form page</a>.</p>
</iframe>

<!-- Bad: No title attribute -->
<iframe src="contact-form.html"></iframe>

<!-- Bad: Generic title -->
<iframe src="contact-form.html" title="iframe"></iframe>

Accessibility Tips:

  • Screen readers will announce the title when users navigate to the iframe
  • Fallback content is displayed if iframes are disabled or unsupported
  • Users can skip the iframe using keyboard navigation if they choose

💡 Accessibility Best Practices

  • Always include a meaningful title attribute
  • Provide fallback content between iframe tags
  • Ensure embedded content is also accessible (keyboard navigable, proper contrast, etc.)
  • Test with screen readers like NVDA, JAWS, or VoiceOver
  • Consider if an iframe is the best solution - sometimes a regular link is more accessible

Iframe Security Considerations

⚠️ Important Security Notes

  • Only embed trusted sources: Iframes can potentially contain malicious content
  • Use the sandbox attribute: Restrict capabilities when embedding untrusted content
  • Use HTTPS: Always use secure URLs to prevent man-in-the-middle attacks
  • Content Security Policy: Configure CSP headers to control iframe sources
  • X-Frame-Options: Be aware that some sites prevent being embedded in iframes

Best Practices Summary

  • Always include a title attribute - Required for accessibility and screen readers
  • Use lazy loading - Improves page load performance for off-screen iframes
  • Set explicit dimensions - Prevents layout shifts as the page loads
  • Use sandbox when appropriate - Adds security restrictions for untrusted content
  • Provide fallback content - Add content between iframe tags for browsers that don't support iframes
  • Test on mobile devices - Ensure iframes are responsive and touch-friendly
  • Use descriptive titles - Help screen reader users understand iframe content
  • Consider alternatives - Sometimes embedding isn't necessary; links might be better
  • Validate embedded content - Ensure the content inside the iframe is also accessible

Test Your Knowledge

4 practice questions are available. Choose Start practice to try them.

Related Articles

Continue your learning journey with these related tutorials:

HTML Links

Create hyperlinks to connect pages and navigate across your website.

Embedding Content in HTML

Learn techniques for embedding external content within your web pages.

HTML Media

Incorporate audio, video, and multimedia elements into your HTML documents.

HTML Security

Understand security best practices for protecting your web applications.

HTML Layout

Design effective page layouts using modern HTML and CSS techniques.

HTML Responsive Web Design

Build websites that adapt beautifully to all screen sizes and devices.