html

How to add iframes in HTML

HyperText Markup Language aka HTML is a language that is used for the purpose of building fundamental structures of web pages. It provides many distinguishing features that make your website more interactive. One such feature is the HTML iframe or HTML inline frame. Let’s dig into the details of iframes.

HTML iFrame

HTML iframe allows you to add an external document to your HTML document, for instance, a web page within a web page. The document that is embedded is independent of the surrounding elements. In order to add an iframe in your current HTML document, the <iframe> tag is used. Iframe, short for Inline Frame defines an inline frame.

Syntax

 <iframe src="http://www.example.com/"> </iframe>

The URL in the syntax denotes the location of the external document that you want to embed in your current web page.

Example
In the following example, we are embedding an external document in our HTML file.

<!DOCTYPE html>
<head>
    <title>HTML iFrame</title>
</head>
<body>
    <iframe src="https://linuxhint.com/c-getsockname-function-usage/"></iframe>
</body>
</html>

Output
The external web page has been embedded in the current HTML web page.

This how you can include an iframe in your HTML web page.

Adjust Height and Width of an iframe

As you can see in the above screenshot there is a certain height and width of the iframe. The height and width of the iframe can be fixed according to your desire. Here is an example of adjusting the height and width of an inframe.

Example
In the following example, we have set the height and width of an iFrame using HTML attributes.

<!DOCTYPE html>
<body>
    <iframe src="https://linuxhint.com/c-getsockname-function-usage/" width="600" height="200"></iframe>
</body>
</html>

In the above example, we have set the width of the iframe to 600 and height to 200.

Output

The height and width of the iframe shown in output has been adjusted using HTML attributes.

Another approach for doing this is by using CSS. Here is an example of setting the height and width of an HTML iframe using CSS.

Example

<!DOCTYPE html>
<body>
    <iframe src="https://linuxhint.com/c-getsockname-function-usage/" style="width: 600px; height: 400px;"></iframe>
</body>
</html>

Output

The height and width of the iframe shown in output has been adjusted using CSS.

Adjusting borders of <iframe> tag

By default, an iframe is embedded into an HTML document with borders. Just like the height and width, you can also adjust the borders. Here we have shown an example.

Example
In the following example, we are adjusting the border of the iframe using CSS border property.

<!DOCTYPE html>
<html>
<body>
    <iframe src="https://linuxhint.com/c-getsockname-function-usage/" style="border: 5px solid black; height: 200px; width: 300px;"></iframe>
</body>
</html>

In the above example, using the CSS border property we have set the border of the iframe 5px along with solid black color.

Output

The border of the iframe shown in output has been adjusted.

iFrames as target Hyperlinks

An iframe can be used as a target hyperlink that means that using iframe as target hyperlinks a user can view the link provided on an HTML page in that iframe instead of opening it in a new window. For the purpose of doing so, set the target attribute of the <a> tag as the name attribute of the iframe.

Example

<!DOCTYPE html>
<html>
<body>
    <iframe src="https://linuxhint.com/c-getsockname-function-usage/" name="iFrame" style= "width:600px; height: 300px;"></iframe>
    <p><a href="https://linuxhint.com/" target="iFrame">Visit linuxhint.com</a></p>
</body>
</html>

In the above example, we have embedded a web page in an HTML web page, moreover, we have used iframe as a target hyperlink. As you can see we have set the target attribute of the <a> tag the same as the name attribute of the iframe. By doing so when you click the hyperlink it will open in the same iframe instead of a new window.

Output

Click on the hyperlink and it will open in the iframe.

The hyperlink shown in the output will open in the inframe.

Following the above-mentioned approaches, you can add an iframe in your HTML web page.

Conclusion

To add an iframe in your HTML document use the HTML tag. iFrame short for inline frames are used to add external web pages in your current HTML web page. These iframes are independent of the surrounding elements of a web page. The height and width of an iframe can be adjusted according to your desire, moreover, iframes can be used as target hyperlinks. This write-up discusses in depth, how to add iframes in HTML using suitable examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.