Learn HTML Iframes

Tips (Total 4)

1. What is HTML Iframes

2. How to set Iframe Height and Width

3. How to remove Iframe Border

4. How to create HTML Iframe - Target for a Link

# Tips-1) What is HTML Iframes

An HTML iframe is used to display a web page within a web page.

Full Example of HTML Iframes

The HTML <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

index.html

Example: HTML

 <iframe src="https://itupto.com" title="description"></iframe>

Output should be:

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.

# Tips-2) How to set Iframe Height and Width

Use the height and width attributes to specify the size of the iframe.

Full Example of Iframe Height and Width

The height and width are specified in pixels by default:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>

<iframe src="https://itupto.com" height="200" width="300" title="Iframe Example"></iframe>

</body>
</html>

Output should be:

Use Style Iframe Height and Width

Or you can add the style attribute and use the CSS height and width properties:

index.html

Example: HTML

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

Output should be:

# Tips-3) How to remove Iframe Border

By default, an iframe has a border around it.

Full Example of Remove Iframe Border

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

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h2>Remove the Iframe Border</h2>
<p>To remove the default border of the iframe, use CSS:</p>

<iframe src="https://itupto.com" style="border:none;" title="Iframe Example"></iframe>

</body>
</html>

Output should be:

Full Example of Custom Iframe Border with CSS

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

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h2>Custom Iframe Border</h2>
<p>With CSS, you can also change the size, style and color of the iframe's border:</p>

<iframe src="https://itupto.com" style="border:2px solid red;" title="Iframe Example"></iframe>

</body>
</html>

Output should be:

# Tips-4) How to create HTML Iframe - Target for a Link

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

Full Example of Iframe - Target for a Link

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

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

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

<p><a href="https://itupto.com" target="iframe_a">Itupto.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>