What is an iframe and How it works

In this article, you will learn what is an iframe in Html and how to use it. The <iframe> is short for the inline frame. An inline frame is used to embed another document within the current HTML document. Keep reading on How can I access an iFrame from the codebehind file in ASP.NET.

What is an iframe used for?

An iframe is used to embed another web page within the current web page. iFrames are most often used to insert dynamic content like ads, documents, videos, widgets, and interactive media. The ‘src‘ attribute is used to specify the URL of the document that occupies the <iframe>.

Syntax: <iframe src=”URL”></iframe>

Setting up Height and Width:

The height and width attributes are used to specify the size of the <iframe>. The attribute values are specified in pixels by default, but they can also be specified in percentages like “70%”.

<iframe src="hello.html" width="400" height="200"></iframe>

iFrame Attributes

Find the below list of all attributes available in it:-

src=”(URL of initial iframe content)”.

name=”(name of frame, required for targeting)”.

longdesc=”(link to long description)”.

width=”(frame width, % or pixels)”.

height=”(frame height, % or pixels)”.

align=”[ top | middle | bottom | left | right | center ] (frame alignment, pick two, use comma)”.

frameborder=”[ 1 | 0 ] (frame border, default is 1)”.

marginwidth=”(margin width, in pixels)”.

marginheight=”(margin height, in pixels)”.

scrolling=”[ yes | no | auto ] (ability to scroll)”.

iFrame Examples

<iframe name="inlineframe" src="test.html" frameborder="0" scrolling="auto" width="500" height="180" marginwidth="5" marginheight="5" ></iframe>

<!DOCTYPE html>
<html>
<body>

    <h1>The iframe element + CSS</h1>

    <p>An iframe with default borders:</p>
    <iframe src="https://dotnettec.com" width="100%" height="300"></iframe>

    <p>An iframe with a thin black border:</p>
    <iframe src="https://dotnettec.com" width="100%" height="300" style="border:1px solid black;"></iframe>

    <p>An iframe with no borders:</p>
    <iframe src="https://dotnettec.com" width="100%" height="300" style="border:none;"></iframe>

</body>
</html>

Other References: https://www.w3schools.com/tags/tag_iframe.ASP

Conclusion

I hope you liked this article on what is an iframe in Html: definition and example. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

What is an iframe used for?

iFrame Attributes

iFrame Examples

Reader Interactions

Leave a Reply Cancel reply