Syntax
<iframe src="https://example.com" width="600" height="400"></iframe>Examples
Embedding a Map
A basic embedded iframe, such as a map widget.
<iframe src="https://maps.example.com/embed?q=Manchester" width="600" height="450" style="border:0;" loading="lazy"></iframe>Sandboxed Iframe
Restricting what an embedded page is allowed to do for security.
<iframe src="https://untrusted-widget.com" sandbox="allow-scripts" width="400" height="300"></iframe>Responsive Iframe
Making an iframe scale with its container using CSS.
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src="https://example.com/video" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0"></iframe>
</div>Attributes
- src (URL): The URL of the page to embed
- sandbox (string): Restricts capabilities of the embedded content, such as scripts or form submission
- loading (lazy | eager): Controls when the iframe content loads relative to the viewport
- allow (string): Specifies permissions policy features the iframe can use, like camera or fullscreen
Best practices
- Always use the sandbox attribute when embedding content from a source you do not fully control
- Use loading="lazy" for iframes below the fold to improve initial page load performance
- Give the iframe a descriptive title attribute for screen reader users
- Avoid iframes for content that could just as easily be a normal part of the page — they add overhead and complicate styling
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<img>
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<video>
The <video> element embeds video content directly in a web page without needing a third-party plugin. It supports built-in playback controls, multiple source formats via nested <source> elements for browser compatibility, and various attributes for controlling autoplay, looping, and muting.<audio>
The <audio> element embeds sound content — music, podcasts, or sound effects — directly in a page. Like <video>, it supports multiple <source> elements for format fallback and built-in playback controls, without needing Flash or other plugins.
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<video>
The <video> element embeds video content directly in a web page without needing a third-party plugin. It supports built-in playback controls, multiple source formats via nested <source> elements for browser compatibility, and various attributes for controlling autoplay, looping, and muting.<audio>
The <audio> element embeds sound content — music, podcasts, or sound effects — directly in a page. Like <video>, it supports multiple <source> elements for format fallback and built-in playback controls, without needing Flash or other plugins.