The HTML <iframe> tag defines an inline frame.
An inline frame serves the purpose of embedding another document inside the current HTML document.
| <iframe src=”url“ title=”description“></iframe> |
Remember to consistently include a title attribute for the <iframe>. This assists screen readers in vocalizing the content contained within the iframe.
Utilize the height and width attributes to define the dimensions of the iframe.
By default, these dimensions are specified in pixels.
Example
| <iframe src=”demo_iframe.htm” height=”200″ width=”300″ title=”Iframe Example”></iframe> |
Alternatively, you can incorporate the style attribute and apply CSS height and width properties to adjust the dimensions of the iframe.
Example
| <iframe src=”demo_iframe.htm” style=”height:200px;width:300px;” title=”Iframe Example”></iframe> |
By default, an iframe is surrounded by a border.
To eliminate the border, include the style attribute and utilize the CSS border property.
Example
| <iframe src=”demo_iframe.htm” style=”border:none;” title=”Iframe Example”></iframe> |
CSS allows you to modify the size, style, and color of the iframe’s border as well.
Example
| <iframe src=”demo_iframe.htm” style=”border:2px solid red;” title=”Iframe Example”></iframe> |
An iframe can serve as the designated target frame for a hyperlink.
The target attribute of the hyperlink must correspond to the name attribute of the iframe.
Example
| <iframe src=”demo_iframe.htm” name=”iframe_a” title=”Iframe Example”></iframe> <p><a href=”https://code7school.com/” target=”iframe_a”>code7school.com</a></p> |
