HTML Layout
HTML Iframes
Written by Swapnil RajaUpdated
An iframe (short for inline frame) is an HTML element that allows you to embed another webpage or document inside the current webpage. It acts like a window or a mini browser within your page.
Iframe Syntax
html
<iframe src="https://www.example.com" title="Iframe Example"></iframe>Iframe Attributes:
src– The URL of the page to embed.title– Provides a text description (important for accessibility).
Iframe Attributes Explained
| Attribute | Description | Example |
|---|---|---|
| src | Specifies the URL of the page to embed. | <iframe src="https://example.com"></iframe> |
| height | Sets the height of the iframe. | <iframe src="page.html" height="400"></iframe> |
| width | Sets the width of the iframe. | <iframe src="page.html" width="600"></iframe> |
| title | Provides a title for accessibility. | <iframe src="page.html" title="Demo"></iframe> |
| name | Used to name the iframe (useful for targeting links). | <iframe name="myFrame"></iframe> |
| sandbox | Adds security restrictions (disables scripts, forms, etc.). | <iframe src="page.html" sandbox></iframe> |
| allowfullscreen | Allows the iframe to display full-screen content. | <iframe src="video.html" allowfullscreen></iframe> |
| loading | Controls loading behavior (lazy or eager). | <iframe src="page.html" loading="lazy"></iframe> |
| referrerpolicy | Controls the referrer information sent when loading content. | <iframe src="page.html" referrerpolicy="no-referrer"></iframe> |
Example: Embedding a Website
html
<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=77.5,12.9,77.7,13.1&layer=mapnik" width="800" height="400" title="Embedded map"></iframe>Example: Embedding a YouTube Video
html
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>Example: Using the sandbox Attribute
html
<iframe src="/samples/form.html" width="600px" height= "450px" sandbox></iframe>
<!--Default sandbox value is restricted to submit any form or script. To submit the form you need to allow it with sandbox. Try using sandbox="allow-forms" and it will let you submit the form. -->This prevents the embedded page from running scripts or submitting forms - improving security.
Targeting Links to an Iframe
You can load content dynamically into an iframe using the name attribute.
html
<iframe name="myFrame" width="600" height="300"></iframe>
<a href="https://www.wikipedia.org" target="myFrame">Open Wikipedia in Iframe</a>When you click the link, it loads inside the iframe instead of opening a new page.
Iframe Best Practices
- Use the
titleattribute for accessibility. - Add
sandboxto improve security. - Use
loading="lazy"to improve performance. - Avoid overusing iframes - they can slow down the page and complicate SEO.
Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
