HTML Iframes

An HTML iframe (Inline Frame) is an HTML element that allows you to embed another document within the current HTML document. It essentially creates a window or a frame in which an external content, typically from another source or website, can be displayed. The content inside the iframe is independent of the surrounding content on the page.

Example

<iframe src="URL" width="width" height="height" frameborder="0"></iframe>

You can click on above box to edit the code and run again.

Output

My First Heading

My first paragraph

src: Specifies the source URL of the document to be embedded in the iframe.
width and height: Set the width and height of the iframe in pixels or as a percentage of the parent container.
frameborder: Determines whether or not to display a border around the iframe. A value of "0" means no border, and "1" means a border will be displayed.

Example

              
<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Iframe Example</title>
 </head>
 <body>

<h2>Embedding an External Website</h2>

<iframe src="https://www.codelines.in" width="800" height="600" frameborder="0"></iframe>

 </body>
 </html>

You can click on above box to edit the code and run again.

Output

My First Heading

My first paragraph

Additional Attributes:

sandbox Attribute:

Provides a set of extra restrictions for the content within the iframe. It is used for security purposes to isolate the embedded content.

allow Attribute:

Specifies a set of permissions for the content within the iframe. For example, allow="autoplay" allows automatic playback of audio or video.

name Attribute:

Assigns a name to the iframe, allowing it to be the target of links or forms in other parts of the document.

scrolling Attribute:

Determines whether to display scrollbars in the iframe. Possible values are "yes," "no," and "auto."

Example

             
<iframe src="URL" width="width" height="height" frameborder="0" sandbox="allow-scripts allow-same-origin" allow="autoplay" name="exampleFrame" scrolling="auto"></iframe>

You can click on above box to edit the code and run again.

Output

Iframes are commonly used for various purposes, including embedding maps, videos, external content, advertisements, and more. However, care should be taken when embedding content from external sources to ensure security and user privacy.