The `iframe` tag in HTML creates an inline rectangular frame that allows another HTML document to be embedded inside the current one. In addition, it allows several attributes inside the tag. These attributes control properties such as the webpage to display, height, and width of the frame, allowing scrolling, borders, and margins.

The illustration below shows what is an `iframe` in `HTML`:

# Syntax

The basic syntax of an `iframe` tag is a follows:

```HTML
<iframe> src = "webpage.html" </iframe>
```
We begin by opening the tags using the `<>` sign. In between, we write `iframe`. We then close the tags using the `</>` sign. Once again, we will place the name of our tag in-between `<>` and after the `/` symbol.

# Attributes

The `iframe` tag allows several attributes that can be changed. We have listed some of them and their purpose below:

| Attribute  | Purpose  |
| - | - |
| `src`  | Refers to the URL of the webpage to be embedded.  |
| `height`  | Changes the height of the frame. Values are in pixels  |
| `width`  | Changes the width of the frame. Values are in pixels.  |
| `frameborder`  | Allows border to be added or removed. Takes in the value of either 1 (yes) or 0 (no).   |
|`marginwidth` | Controls the width from the borders to the frame content. Values are in pixels|
|`marginheight` | Controls the height from the borders to the frame content. Values are in pixels|
|`scrolling`| Controls whether the frame should have scrollbars or not. Takes in the value of either "yes", "no," or "auto". |

> Not every webpage can be added inside an `iframe`. Browser security restricts most web pages from being added inside an `iframe` in another HTML document.

# Example

The code below shows how an `iframe` works:

> `Line 5` outputs a heading to differentiate the `iframe` from the rest of the HTML document. 

> `src` attribute holds the webpage URL to embed.

> `width` and `height` have been adjusted accordingly. 

<!DOCTYPE html>
<html>
<body>

<h1>This is my webpage</h1>

<iframe src = "https://www.dawn.com/" width = "555" height = "200"> </iframe>

</body>
</html>

codemirror

Similarly, we can test other attributes of `iframe` using the same webpage:

> `frameborder` and `scrolling` are removed. `marginheight` is added. `width` and `height` are adjusted.

<!DOCTYPE html>
<html>
<body>

<h1>This is my webpage</h1>

<iframe src = "https://www.dawn.com/" width = "600" height = "200"
frameborder = 0 marginheight = "50" scrolling = "no" > </iframe>

</body>
</html>

We can also see what happens when a page cannot be embedded inside an `iframe` because of security restrictions:

<!DOCTYPE html>
<html>
<body>

<h1>This is my webpage</h1>

<iframe src = "https://www.educative.io/explore" width = "600" height = "200" > </iframe>

</body>
</html>

What is the iframe tag in HTML?

The HTML iframe tag embeds another HTML document within the current one, allowing several customizable attributes like src, height, and width.

Attribute	Purpose
`src`	Refers to the URL of the webpage to be embedded.
`height`	Changes the height of the frame. Values are in pixels
`width`	Changes the width of the frame. Values are in pixels.
`frameborder`	Allows border to be added or removed. Takes in the value of either 1 (yes) or 0 (no).
`marginwidth`	Controls the width from the borders to the frame content. Values are in pixels
`marginheight`	Controls the height from the borders to the frame content. Values are in pixels
`scrolling`	Controls whether the frame should have scrollbars or not. Takes in the value of either “yes”, “no,” or “auto”.