HTML · Chapter 24 of 45
HTML Iframes
An <iframe> embeds another HTML document inside the current page, commonly used for maps, videos, ads, or embedded widgets from other sites.
Because iframes load external content, they can pose security risks; modern browsers support the sandbox attribute to restrict what an embedded page can do.
Syntax
<iframe src="url" width="600" height="400"></iframe>Basic usage
src specifies the URL to embed. width and height (or CSS) control the frame's dimensions on the page.
Security considerations
The sandbox attribute restricts iframe capabilities like scripts or form submission. Always be cautious embedding untrusted third-party content.
Example 1 (html)
<iframe src="https://example.com" width="600" height="400" title="Example site"></iframe>Output
(embeds example.com in a 600x400 frame)The title attribute improves accessibility for embedded content.
Example 2 (html)
<iframe src="video.html" sandbox="allow-scripts"></iframe>Output
(embeds video.html with restricted permissions)sandbox restricts the iframe to only allow scripts, blocking other capabilities.
Key points
- <iframe> embeds another document inside the current page.
- src defines the URL of the embedded content.
- Always add a title attribute for accessibility.
- sandbox restricts iframe permissions for security.
💡 Note: Many sites block being embedded in iframes via the X-Frame-Options header for security.