The iframe
tag in HTML creates an inline rectangular frame that allows another HTML document to be embedded inside the current one. In addition, it allows several attributes inside the tag. These attributes control properties such as the webpage to display, height, and width of the frame, allowing scrolling, borders, and margins.
The illustration below shows what is an iframe
in HTML
:
The basic syntax of an iframe
tag is a follows:
<iframe> src = "webpage.html" </iframe>
We begin by opening the tags using the <>
sign. In between, we write iframe
. We then close the tags using the </>
sign. Once again, we will place the name of our tag in-between <>
and after the /
symbol.
The iframe
tag allows several attributes that can be changed. We have listed some of them and their purpose below:
Attribute | Purpose |
---|---|
src |
Refers to the URL of the webpage to be embedded. |
height |
Changes the height of the frame. Values are in pixels |
width |
Changes the width of the frame. Values are in pixels. |
frameborder |
Allows border to be added or removed. Takes in the value of either 1 (yes) or 0 (no). |
marginwidth |
Controls the width from the borders to the frame content. Values are in pixels |
marginheight |
Controls the height from the borders to the frame content. Values are in pixels |
scrolling |
Controls whether the frame should have scrollbars or not. Takes in the value of either “yes”, “no,” or “auto”. |
Not every webpage can be added inside an
iframe
. Browser security restricts most web pages from being added inside aniframe
in another HTML document.
The code below shows how an iframe
works:
Line 5
outputs a heading to differentiate theiframe
from the rest of the HTML document.
src
attribute holds the webpage URL to embed.
width
andheight
have been adjusted accordingly.
Similarly, we can test other attributes of iframe
using the same webpage:
frameborder
andscrolling
are removed.marginheight
is added.width
andheight
are adjusted.
We can also see what happens when a page cannot be embedded inside an iframe
because of security restrictions:
Free Resources