HTML Layout
HTML Iframes
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.html5andcss3.org" width="800" height="400" title="HTML5 & CSS3"></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="/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 |
