Using the
<iframe>
element we can add a new HTML document in the existing one. The <iframe> element create a rectangular region with its own borders and scrollbar that can show a separate web page.
<iframe> syntax
<iframe src="URL"> </iframe>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<iframe src ="https://www.techgeekbuzz.com/">
<!-- this message will be shown if the browser does not support iframe -->
Browser does not support <iframe>
</iframe>
</body>
</html>
Output
<iframe> has its own attribute for setting height and width, unlike most of the other elements we do not need to use the styling on <iframe> tag for setting its resolution. Example
<iframe src ="https://www.techgeekbuzz.com/" height="200" width="300"> Does not support </iframe>Output By default height and width attribute accept values in pixels (px). <Note> CSS style attribute can also be used to set the width and height of the iframe.
<iframe> Target a Link
Using a target attribute of <a> tag we can set a src URL value for a <iframe> element. The
target
value of <a> tag must be corelate with the
name
attribute of <iframe>
Example:
<!DOCTYPE html> <html> <head> </head> <body> <iframe src="https://www.techgeekbuzz.com/" name="techgeekbuzz"> </iframe> <p> <a href="https://www.techgeekbuzz.com/html-cheat-sheet/" target="techgeekbuzz"> HTML Cheat Sheet </a> </p> </body> </html>Output HTML Cheat Sheet
Attributes of <iframe>
| <iframe> attributes | Description |
| src | It specifies the document or URL that need to be loaded in the frame. |
| name | This attribute set a name to the frame. |
| frameborder | This attribute decides whether the border of the frame should be displayed or not. It accepts two values 1 and 0. 1 means yes, and 0 means no. |
| marginwidth | It specifies the space between the frame border and frame content from left to right. |
| marginheight | It specifies the space between the frame border and frame content from top to bottom. |
| height | It specifies the height of the frame. |
| Width | It specifies the width of frame |
| scrolling | It specifies whether a scrollbar should be present on the frame or not. It accepts 3 values "yes", "no" and "auto" |
- <iframe> represent inline frame.
- It is used to put a completely separate HTML document on a webpage.
- The src attribute specifies the HTML document that needs to be embedded on the webpage.
- Width and height of the frame can be set through width and height attributes.
People are also reading:
