A HTML iframes is used to display a page inside a website page.
HTML Iframe is used to display a nested page (a webpage inside a site page). The HTML <iframe>
tag defines an inline frame, henceforth it is additionally called as an Inline frame.
An HTML iframe embeds another document inside the current HTML document in the rectangular region.
The webpage content and iframe substance can interact with each other using JavaScript.
In this tutorial, you will learn-
In this article, you will learn-
HTML Iframe Syntax
The HTML <iframe> tag indicates an inline frame.
An inline frame is used to insert another document inside the current HTML document.
Syntax
<iframe src="url" title="description"></iframe>
Tip: It is a decent practice to consistently incorporate a title attribute for the <iframe> . This is used by screen readers to read out what the substance of the iframe is.
Iframe – Set Height and Width
Use the stature and width attributes to determine the size of the iframe.
The height and width are indicated in pixels by default:
Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
<!DOCTYPE html> <html> <body> <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe> </body> </html>
HTML Iframes
You can use the height and width attributes to specify the size of the iframe:
Or then again you can add the style attribute and use the CSS height and width properties:
Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
Iframe – Remove the Border
By default, an iframe has a border around it.
To eliminate the border, add the style attribute and use the CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
With CSS, you can likewise change the size, style and color of the iframe’s border:
Example
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>
Iframe – Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link should refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe> <p><a href="https://www.worldofitech.com" target="iframe_a">worldofitech.com</a></p>
Chapter 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
andwidth
attributes specifies the size of the iframe - Use
border:none;
to remove the border around the iframe
HTML iframe Tag
Tag | Description |
<iframe> | Defines an inline frame |
HTML Block and Inline Elements
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.