The <iframe> tag in HTML is used to embed another webpage within the current webpage. This is known as an inline frame, and it allows you to display external content directly on your page.
Embedding External Content: An iframe can load and display content from another URL, providing a way to show another website or document within your page.
Attributes: The <iframe> tag supports various attributes to control its behavior and appearance:
src: Specifies the URL of the page to display.
width and height: Define the dimensions of the iframe.
rameborder: Controls whether the iframe has a border (deprecated in HTML5).
scrolling: Defines whether scrollbars should appear (deprecated in HTML5).
title: Provides a description of the iframe content for accessibility.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Iframe Example</title>
</head>
<body>
<h1>Main Page</h1>
<iframe src="https://waytocode.in/" width="600" height="400" title="Example Website">
<!-- Fallback content for browsers that do not support iframes -->
Your browser does not support iframes.
</iframe>
</body>
</html>
src="https://waytocode.in/": Points to the URL of the external content to be displayed.
width="600" and height="400": Set the size of the iframe to 600 pixels wide and 400 pixels high.
title="Example Website": Provides a title for accessibility purposes.
| Attribute name | Value | Description |
|---|---|---|
| allowfullscreen | If set to true, the frame can be displayed in full-screen mode. | |
| height | Pixels | Specifies the height of the iframe. Default is 150 pixels. |
| name | text | Assigns a name to the iframe, useful for targeting links. |
| frameborder | 1 or 0 | Indicates whether the iframe should have a border. Not supported in HTML5. |
| Width | Pixels | Specifies the width of the iframe. Default is 300 pixels. |
| src | URL | Defines the URL of the document to be displayed in the iframe. |
| sandbox | allow-forms | Enables form submission. If not used, forms will be blocked. |
| allow-popups | Enables popups. If not set, popups will be blocked. | |
| allow-scripts | Allows JavaScript to run in the iframe. | |
| allow-same-origin | Treats the content as being from the same origin. | |
| srcdoc | Defines the HTML content to be displayed in the iframe, overriding the src attribute if supported by the browser. | |
| scrolling | auto | Displays a scrollbar if the content overflows the iframe dimensions. |
| yes | Always shows a scrollbar. | |
| no | Never shows a scrollbar. |