HTML Basics
HTML Iframes
An iframe embeds another web page inside your page, like a window into a different document. It is commonly used to display maps, videos, and widgets.
What is an HTML Iframe?
An iframe (inline frame) is created with the <iframe> tag. Its src attribute points to another web page, which is then displayed in a rectangular area inside your own page. Think of it as a mini-browser embedded in your document.
Iframes are widely used to embed third-party content — YouTube videos, Google Maps, payment widgets, and code demos — without copying that content onto your own server.
Basic Usage
<iframe src="https://example.com" width="400" height="250" title="Example site"></iframe>Example: Iframe With a Border and Title
<!DOCTYPE html>
<html>
<body>
<h2>An embedded page</h2>
<iframe src="https://example.com"
width="100%" height="300"
title="Example.com homepage"
style="border:2px solid #0d6efd; border-radius:8px;">
</iframe>
</body>
</html>More Examples
<iframe width="420" height="236"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Embedded video"
allowfullscreen>
</iframe><!DOCTYPE html>
<html>
<body>
<a href="https://example.com" target="viewer">Load example.com below</a>
<br><br>
<iframe name="viewer" width="100%" height="250" title="Viewer"></iframe>
</body>
</html>Common iframe Attributes
| Attribute | Purpose |
|---|---|
| src | The URL of the page to embed. |
| width / height | The size of the frame. |
| title | A description for accessibility (required). |
| allowfullscreen | Lets embedded video go full screen. |
| sandbox | Restricts what the embedded page can do. |
| loading | Set to "lazy" to defer loading. |
Many sites block being embedded using the X-Frame-Options header, so some pages will simply show blank in an iframe. Only embed content that permits it.
Always add a title attribute to iframes. Screen readers use it to announce what the embedded frame contains. Use the sandbox attribute for untrusted content.
Key Takeaways
- An <iframe> embeds another web page inside yours.
- src sets the embedded URL; width and height set the size.
- Add a title for accessibility and use sandbox for safety.
- Some sites block embedding and will appear blank.