An iframe (also known as an inline frame) is a type of frame that displays external objects, including other web pages, inside a web page. Essentially, an iframe acts as a mini web browser inside a web browser. In addition, the content within an iframe exists independently of the surrounding elements.
The following is the general iframe syntax that you can use to add an iframe to your web page:
The location of the external object or web page is specified by the src attribute.
The following example shows the “hello.html” file inside the iframe in the current document.
<iframe src="hello.html"></iframe>The height and width are used to define the width and height of the iframe.
<iframe src="hello.html" width="400" height="200"></iframe>CSS can also be used to define an iframe's width and height, as shown below:
<iframe src="hello.html" style="width: 400px; height: 200px;"></iframe>To learn how to use CSS on HTML elements, check out the HTML styles Tutorial.
Note: By default, the width and height attributes are set in pixels, but they can also be set in percentage, for example, 50%, 100%, etc. Iframe width is set to 300 pixels, height is set to 150 pixels.
By default, the iframe is surrounded by a border. The CSS border property is the best way to edit or remove these borders.
In the following example, the iframe will be rendered without any borders.
<iframe src="hello.html" style="border: none;"></iframe>In the same way, the border property can be used to add the border of your preference to the iframe. For example, in the following example, the iframe will be rendered with a 2 pixel blue border.
<iframe src="hello.html" style="border: 2px solid blue;"></iframe>You can also use an iframe as a hyperlinks target.
The name attribute can be used to name an iframe. This means that when you click on a link with a name as a target attribute, the linked resource in the iframe will open.
Let’s see an example to see how this works:
<iframe src="demo-page.html" name="myFrame"></iframe>
<p><a href="https://www.codinghub360.in" target="myFrame">Open CodingHub360.iN</a></p>