Skip to main content

HTML Iframes

By SamK
0
0 recommends
Topic(s)

An inline frame is used to integrate another document (webpage) into the current HTML document (webpage).

The HTML <iframe> tag defines an inline frame.

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

Iframe Example

It is recommended to include a title attribute for the <iframe>. Screen readers utilize this attribute to announce the content of the iframe.

Iframe - Height and Width

You can specify the size of the iframe using the height and width attributes.

By default, the height and width are specified in pixels.

<iframe src="page.html" height="200" width="300" title="Iframe Example"></iframe> 

Iframe-Height & Width Example

Alternatively, you can utilize the style attribute and apply the CSS height and width properties.

<iframe src="page.html" style="height:200px;width:300px;" title="Iframe Example"></iframe> 

Iframe Border

By default, an iframe includes a border.

To eliminate the border, apply the style attribute and utilize the CSS border property.

<iframe src="page.html" style="border:none;" title="Iframe Example"></iframe>

Iframe-border non Example

CSS allows you to modify the size, style, and color of the iframe's border as well.

<iframe src="page.html" style="border:2px solid red;" title="Iframe Example"></iframe> 

Iframe-border Example

Iframe - Link Target

An iframe can serve as the target frame for a link.

The target attribute of the link should correspond to the name attribute of the iframe.

<iframe src="page.html" name="iframe_name" title="Iframe Example"></iframe>
<p><a href="https://www.example.com" target="iframe_name">Example.com</a></p>

Iframe-target attribute Example

Please check below options for the links to our previous or next tutorial.

Questions & Answers