You Are Here

HTML Iframes

The iframe in HTML describes an inline frame, which is used to embed another document in the current document.
This <iframe> tag embeds another document in the current HTML document in a rectangular region, including scrollbars and borders.

Syntax:

<iframe src="URL"></iframe>
The “src” attribute specifies the address of the document whose contents will be loaded into the frame.

Example:

<iframe src="https://flourishsoft.com/"></iframe>
Try it

The <Iframe> Tag Attributes

src:

The src attribute describes the address of the document to embed in the <iframe>. The value of the src attribute can be any URL.

name:

The name attribute allows you to specify a name for an iframe. It is important when you want to create links in one frame that load pages into another frame in that case frame need a name to identify itself as the target of the link.

frameborder

The frameborder attribute is used to specify whether or not to show the borders of the frame.

marginwidth

This attribute specifies the left and right margins of the content of an <iframe>.

marginheight

This attribute specifies the top and bottom margins of the content of an <iframe>.

scrolling

This attribute specifies whether or not to display scrollbars in an <iframe>.

longdesc

This attribute specifies a page that contains a long description of the content of an <iframe>.

Setting Height and Width of Iframe:

The height and width attributes are used to set the size of the iframe.
The values of the attributes are specified in pixels by default, you can set them in percentage.

Example:

<iframe src="https://flourishsoft.com/" height="400" width="400"></iframe>
<iframe src="https://flourishsoft.com/" height="90%" width="70%"></iframe>
Try it
To set the height and width you can also use CSS.

Example:

<iframe src="https://flourishsoft.com/" style="height:400px;width:400px;"></iframe>
Try it

Removing the Border of Iframe:

It has a border around it by default. You can remove it by using <style> attribute and CSS border property.

Example:

<iframe src="https://flourishsoft.com/" style="border:none;"></iframe>
Try it
You can also change the size, color, and style of the iframe border using CSS.

Example:

<iframe src="https://flourishsoft.com/" style="border:1px solid blue;"></iframe>
Try it

Iframe Target for a Link:

You can set the target frame for a link using an iframe. The target attribute you have specified for the link must refer to the name attribute of the iframe.
Its name and link target must have the same value otherwise link will not open as a frame.

Example:

<iframe height="350px" width="100%" src="https://flourishsoft.com/" name="iframe-t"></iframe>
<p><a href="http://www.w3codingschools.com/" target="iframe-t"> W3CodingSchools </a></p>
Try it

Ask a Question

Your email address will not be published. Required fields are marked *