Iframes

#	Content	Views
1.	Tutorial Tags	37,061
2.	Tutorial + Programming	1,061,916
3.	Videos	353,254
4.	Results (`Annual + Re-appear`)	44,967
5.	Quiz Chapters	37,147
6.	Quiz Questions	540,385
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,245
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,500
13.	Downloads (Syllabus)	2,638

Home
HTML
Iframes

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

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax

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.

<!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="/html/computer.htm" title="Iframe Example"></iframe>

</body>
</html>

Live Demo & Try it yourself!

#HTML #iframes

Set Height and Width of iframe

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

The height and width are specified in pixels by default:

Example

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

Example

<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>

<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>

<iframe src="/html/computer.htm" height="250" width="500" title="Iframe Example"></iframe>

<HR>

<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="/html/computer.htm" style="height:200px;width:500px" title="Iframe Example"></iframe>
</body>
</html>

Live Demo & Try it yourself!

#HTML #width #height #iframes

Remove the Border of iframe

By default, an iframe has a border around it.

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

Example

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

Example

<!DOCTYPE html>
<html>
<body>

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

<iframe src="/html/computer.htm" style="border:none;" title="Iframe Example"></iframe>
<HR>

<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="/html/computer.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

</body>
</html>

Live Demo & Try it yourself!

#HTML #border #iframe

Target for a Link

An iframe can be used 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>
<body>

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

<iframe src="/html/computer.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="https://www.gssskhokhar.com/index.html" target="iframe_a">gssskhokhar.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>

Live Demo & Try it yourself!