> For the complete documentation index, see [llms.txt](https://codingzonebd.gitbook.io/html-elements/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codingzonebd.gitbook.io/html-elements/html-iframes.md).

# HTML Iframes

An HTML iframe is used to display a web page within a web page.

<figure><img src="https://1737958340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVjGFBuDKR1b3eJbq0zoO%2Fuploads%2FWtEQYnNNOzCNo4iupT2N%2Fimage.png?alt=media&amp;token=cd89e300-0a84-41d5-a04a-29a7a2155fa9" alt=""><figcaption></figcaption></figure>

### HTML Iframe Syntax

The HTML `<iframe>` tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

{% code overflow="wrap" lineNumbers="true" %}

```markup
<iframe src="url" title="description"></iframe>
```

{% endcode %}

### Iframe - Set Height and Width

Use the `height` and `width` attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<iframe src="https://www.google.com/" height="200" width="300" title="Iframe Example"></iframe>

<!-- Or you can add the style attribute and use the CSS height and width properties: -->

<iframe src="https://www.google.com/" style="height:200px;width:300px;" title="Iframe Example"></iframe>

```

{% endcode %}

### Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the `style` attribute and use the CSS `border` property:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<iframe src="https://www.google.com/" style="border:none;" title="Iframe Example"></iframe>

<!-- With CSS, you can also change the size, style and color of the iframe's border -->

<iframe src="https://www.google.com/" style="border:2px solid red;" title="Iframe Example"></iframe>

```

{% endcode %}

### Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The `target` attribute of the link must refer to the `name` attribute of the iframe:

{% code overflow="wrap" lineNumbers="true" %}

```markup
<iframe src="https://www.google.com/" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.google.com" target="iframe_a">Google.com</a></p>
```

{% endcode %}

### Summary

* The HTML `<iframe>` tag specifies an inline frame
* The `src` attribute defines the URL of the page to embed
* Always include a `title` attribute (for screen readers)
* The `height` and `width` attributes specify the size of the iframe
* Use `border:none;` to remove the border around the iframe