HTML < iframe>: Display a web Page Inside Your Document

byPakua Files •
0

HTML <iframe>: src attribute, title attribute, height & width attributes, and uses of borders around the iframe

Iframe in HTML is used to show another web page in a web page.

<iframe> tag is used to use iframe in the webpage.

Iframe in HTML

The syntax for <iframe> tag in HTML

The HTML <iframe> tag defines an inline frame.

An inline frame is utilized to embed other documents within the current HTML document.

Syntax

<iframe src="url" title="description"></iframe>{codeBox}

Note: It is an excellent practice to include a title attribute for the <iframe>. Screen readers utilize this to read out the content of the iframe.{alertSuccess}

{tocify} $title={Table of Contents}

How to set the iframe height & width

The size of the height and width of the frame is given by the width and height attribute of the iframe tag.

The height and width are determined in pixels by default:

Example:

<iframe

 src="https://ift.tt/XAiVjRQ" height="200" width="300" title="Iframe Example">

</iframe>{codeBox}

Output:


It would be better to use the style attribute in the iframe tag using the CSS height and width properties:

Example 2:

<iframe

 src="https://ift.tt/XAiVjRQ" style= "height:200px; width:300px" title="Iframe Example">

</iframe>{codeBox}

HTML | <Iframe> - Remove the Border

By default, an iframe has a border around it.

To vacate the border, add the style attribute and use the CSS border property:

Example -

<iframe

 src="https://ift.tt/XAiVjRQ" style="border:none;" title="Iframe Example">

</iframe>{codeBox}

With CSS, you can also adjust the size, style, and color of the iframe's border:

Example 2 -

<iframe

 src="https://ift.tt/XAiVjRQ" style="border:2px solid green;width:500px;height:300px;" title="Iframe Example">

</iframe>{codeBox}

Target Links in HTML IFrames and Frames

An iframe can be utilized as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example -

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />
<title>
Iframe - Target for a Link
</title>

</head>
<body>

<iframe src="www.google.com" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p>

<a href="https://www.google.com" target="iframe_a">www.google.com</a>

</p>

<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>

</body>
</html>{codeBox}

Blog Summary

  • The HTML <iframe> tag determines an inline frame.
  • The src attribute specifies the URL of the page to embed
  • Always contain a title attribute (for screen readers)
  • The height and width attributes set the size of the iframe
  • Use border:none; to clear the border around the iframe

Conclusion:

Friends, according to my expertise, I have written complete information to help you with “HTML <iframe>: Display a Web Page Inside Your Document” If this post is favorable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.



Tags:

Post a Comment

Previous Post Next Post